怎么用JavaScript实现评论点赞功能

这篇文章主要介绍"怎么用JavaScript实现评论点赞功能"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"怎么用JavaScript实现评论点赞功能"文章能帮助大家解决问题。

效果图：

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元素。

var list = document.getElementById('list');      var boxs = document.getElementsByClassName('box');      //删除节点函数      function removeNode(node){        node[xss_clean].removeChild(node);      }      //事件代理      for(var i=0 ;i
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[xss_clean];        var newTotal = 0;        if(txt == '赞'){          newTotal = oldTotal + 1;          praiseElement[xss_clean] = (newTotal == 1) ? '我觉得很赞' : '我和' + oldTotal +'个人觉得很赞';          el[xss_clean] = '取消赞';        }else{          newTotal = oldTotal - 1;          praiseElement[xss_clean] = (newTotal == 0) ? '' : newTotal + '个人觉得很赞';          el[xss_clean] = '赞';        }        praiseElement.setAttribute('total',newTotal);        praiseElement.style.display = (newTotal == 0) ? 'none': 'block';      }      //事件代理      for(var i=0 ;i
3)实现评论功能
首先要实现评论输入框的改变，通过监听三个事件
1.获得焦点时：onfocus
2.失去焦点：onblur
3.鼠标输入弹起来的时候：onkeyup
//输入框        var textarea = boxs[i].getElementsByTagName('textarea')[0];        textarea.onfocus = function(){          this[xss_clean].className = 'text-box text-box-on';          this.value = (this.value == '评论...') ? '':this.value;        }        textarea.onblur = function(){          if(this.value == ''){            this[xss_clean].className = 'text-box';            this.value = '评论...';          }        }
4）实现回复按钮和字数统计功能
对textarea添加onkeyup键盘弹起事件，学会利用获取父节点和孩子节点的方法。
为了更好的用户体验，使输入框失去焦点时不是立即变小，所以在onblur中增加一个定时器功能，注意当点击灰色回复按钮时要清除定时器
js代码:
textarea.onblur = function(){          var me = this;//因为有定时器所以先将this存放于变量中          timer = setTimeout(function(){            if(me.value == ''){              me[xss_clean].className = 'text-box';              me.value = '评论...';            }          },500);        }        textarea.onkeyup = function(){          var len = this.value.length;          var p = this[xss_clean];          var btn = p.children[1];          var word = p.children[2];          if(len == 0 || len > 140){            btn.className = 'btn btn-off';          }else{            btn.className = 'btn';          }          word[xss_clean] = len + '/140';        }
5）实现评论分享功能
当点击回复按钮时，将输入框的内容添加到回复列表中，是通过创建一个div，新增一个回复列表，注意改变新增回复列表的部分内容以及要改变评论的日期。
js代码：
//发表评论      function replayBox(box){        var textarea = box.getElementsByTagName('textarea')[0];        var list = box.getElementsByClassName('comment-list')[0];        var div = document.createElement('div');        div.className = 'comment-box clearfix';        div.setAttribute('user','self');        var html = ' '+            '
'+            '
我：'+textarea.value+'
'+            '
'+            getTime()+            '赞'+            '删除'+            '
'+            '
';        div[xss_clean] = html;        list.appendChild(div);        textarea.value = '';        textarea.onblur();        function getTime(){          var t = new Date();          var y = t.getFullYear();          var m = t.getMonth() + 1;//月份是从0开始          var d = t.getDay();          var h = t.getHours();          var mi = t.getMinutes();          m = m>10 ? m: '0' + m;          d = d>10 ? d: '0' + d;          h = h>10 ? h: '0' + h;          mi = mi>10 ?mi: '0' +mi;          return y + '-' + m + '-' + d + ' ' + h + ':' + mi;        }      }
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[xss_clean] = newTotal + '取消赞';        }else{          newTotal = oldTotal - 1;          el.setAttribute('total',newTotal);          el.setAttribute('my',0);          el[xss_clean] = (newTotal == 0) ? '' : newTotal + '赞';        }        el.style.display = (newTotal == 0) ? '' : 'inline-block';      }
6）实现回复列表中内容的删除和回复功能
实现回复他人的评论及删除自己的评论
js代码：
 //操作回复      function operateReply(el){        var commentBox = el[xss_clean][xss_clean][xss_clean];//评论的容器        var box = commentBox[xss_clean][xss_clean][xss_clean];//该条分享的容器        var textarea = box.getElementsByTagName('textarea')[0];        var user = commentBox.getElementsByClassName('user')[0];        var txt = el[xss_clean];        if(txt == '回复'){          textarea.onfocus();          textarea.value = '回复' + user[xss_clean];          textarea.onkeyup();        }        else{          removeNode(el[xss_clean][xss_clean][xss_clean]);        }      }
关于"怎么用JavaScript实现评论点赞功能"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。