使用JavaScript实现评论点赞功能

http://www.php.cn/js-tutorial-357679.html

首页> js教程> 正文

使用JavaScript实现评论点赞功能

作者： default|标签：javascript 评论点赞|2017-3-20 15:03

 

通过分析评论功能的逻辑关系，学会如何使用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元素。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var list = document.getElementById('list');       var 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代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

//点赞分享       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