JavaScript评论点赞功能的实现方法

前端之家收集整理的这篇文章主要介绍了JavaScript评论点赞功能的实现方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

通过分析评论功能的逻辑关系,学会如何使用JavaScript实现评论回复、点赞等各种功能

1.学会JavaScript处理日期和时间。

2.掌握Dom操作中的添加/删除子节点方法

3.使用setTimeout设置定时器。

4.使用clearTimeout清除定时器以及事件代理的运用。

效果图:

1)实现删除分享内容功能

利用事件代理实现点击关闭按钮删除分享内容

删除事件:

利用事件代理功能,在父元素节点上添加事件,以减少代码量和系统运行负荷.

事件代理的时候,使用事件对象中的srcElement属性,获取触发元素。

IE浏览器支持window.event.srcElement , 而firefox支持window.event.target。

所以,要想在firefox里面兼容只需要改一个代码:把var el = e.srcElement 改成 var el = e.srcElement || e.target

removeChild()指删除孩子元素,所以要删除当前元素el,先要使用parentNode找到父节点,然后在使用removeChild(el)删除el元素。

Boxs = document.getElementsByClassName('Box'); //删除节点函数 function removeNode(node){ node.parentNode.removeChild(node); } //事件代理 for(var i=0 ;i<Boxs.length;i++){ Boxs[i].onclick = function(e){ e = e||window.event; var el = e.srcElement || e.target; switch (el.className) { case 'close':removeNode(el.parentNode);break; } } }

2)实现分享的点赞功能

构造一个点赞分享函数,需要两个参数,第一个参数(Box)表示所点赞的最外层父容器,第二个参数(el)指触发的元素,即赞的那个按钮

getAttribute()获得属性,使用setAttribute()来设置元素的属性

js代码

分享 function praiseBox(Box,el){//Box为所触发元素el的最外层父容器 var praiseElement = Box.getElementsByClassName('praise-total')[0]; var oldTotal = parseInt(praiseElement.getAttribute('total')); var txt = el.innerHTML; var newTotal = 0; if(txt == '赞'){ newTotal = oldTotal + 1; praiseElement.innerHTML = (newTotal == 1) ? '我觉得很赞' : '我和' + oldTotal +'个人觉得很赞'; el.innerHTML = '取消赞'; }else{ newTotal = oldTotal - 1; praiseElement.innerHTML = (newTotal == 0) ? '' : newTotal + '个人觉得很赞'; el.innerHTML = '赞'; } praiseElement.setAttribute('total',newTotal); praiseElement.style.display = (newTotal == 0) ? 'none': 'block'; } //事件代理 for(var i=0 ;i<Boxs.length;i++){ Boxs[i].onclick = function(e){ e = e||window.event; var el = e.srcElement || e.target; switch (el.className) { case 'close':removeNode(el.parentNode);break; case 'praise':praiseBox(el.parentNode.parentNode.parentNode,el); } } }

3)实现评论功能

首先要实现评论输入框的改变,通过监听三个事件

1.获得焦点时:onfocus

2.失去焦点:onblur

3.鼠标输入弹起来的时候:onkeyup

Boxs[i].getElementsByTagName('textarea')[0]; textarea.onfocus = function(){ this.parentNode.className = 'text-Box text-Box-on'; this.value = (this.value == '评论...') ? '':this.value; } textarea.onblur = function(){ if(this.value == ''){ this.parentNode.className = 'text-Box'; this.value = '评论...'; } }

4)实现回复按钮和字数统计功能

对textarea添加onkeyup键盘弹起事件,学会利用获取父节点和孩子节点的方法

为了更好的用户体验,使输入框失去焦点时不是立即变小,所以在onblur中增加一个定时器功能,注意当点击灰色回复按钮时要清除定时器

js代码:

140){ btn.className = 'btn btn-off'; }else{ btn.className = 'btn'; } word.innerHTML = len + '/140'; }

5)实现评论分享功能

当点击回复按钮时,将输入框的内容添加回复列表中,是通过创建一个div,新增一个回复列表,注意改变新增回复列表的部分内容以及要改变评论的日期。

js代码

5)实现点赞回复功能

点赞按钮的a标签中有个my属性,表示自己是否已点赞,当my值为0时,点击赞按钮时total会加一,当my值为1时,点击赞按钮时total减1。

js代码

回复 function praiseReplay(el){ var oldTotal = parseInt(el.getAttribute('total')); var my = parseInt(el.getAttribute('my')); var newTotal = 0; if(my == 0){ newTotal = oldTotal + 1; el.setAttribute('total',newTotal); el.setAttribute('my',1); el.innerHTML = newTotal + '取消赞'; }else{ newTotal = oldTotal - 1; el.setAttribute('total',0); el.innerHTML = (newTotal == 0) ? '' : newTotal + '赞'; } el.style.display = (newTotal == 0) ? '' : 'inline-block'; }

6)实现回复列表中内容删除回复功能

实现回复他人的评论删除自己的评论

js代码

回复 function operateReply(el){ var commentBox = el.parentNode.parentNode.parentNode;//评论的容器 var Box = commentBox.parentNode.parentNode.parentNode;//该条分享的容器 var textarea = Box.getElementsByTagName('textarea')[0]; var user = commentBox.getElementsByClassName('user')[0]; var txt = el.innerHTML; if(txt == '回复'){ textarea.onfocus(); textarea.value = '回复' + user.innerHTML; textarea.onkeyup(); } else{ removeNode(el.parentNode.parentNode.parentNode); } }

以上所述是小编给大家介绍的JavaScript评论点赞功能实现方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章