如何使用实现评论、回复、点赞等各种功能？

2021-07-01

通过分析评论功能的逻辑关系，学习如何使用评论、回复、点赞等各种功能

1.学习处理日期和时间。

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

3.用于设置定时器。

4. 使用清除计时器和事件代理。

效果图：

1）实现删除共享内容的功能

使用事件代理通过单击关闭按钮删除共享内容。

如何使用实现评论、回复、点赞等各种功能？(图1)

删除事件：

使用事件代理功能，向父元素节点添加事件，减少代码量和系统负载。

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

IE 浏览器支持...，但支持...

所以，如果你想在其中兼容，你只需要改变一个代码： var el = e。到 var el = e。 || e.

() 表示删除子元素，所以要删除当前元素el，先用查找父节点，再用(el)删除el元素。

var list = document.getElementById('list');
      var boxs = document.getElementsByClassName('box');
      //删除节点函数
      function removeNode(node){
        node.parentNode.removeChild(node);
      }
      //事件代理
      for(var i=0 ;i

2)实现点赞分享功能
要构造一个分享点赞的函数，需要两个参数。第一个参数（box）代表点赞的最外层父容器，第二个参数（el）指的是被触发的元素，即点赞的那个。按钮
()获取属性，使用()设置元素的属性。
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
3)实现评论功能
首先要通过监听三个事件来实现评论输入框的变化

1.获得焦点时：
2.失去焦点：
3.当鼠标输入弹出时：
//输入框
        var textarea = 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）实现回复按钮和字数统计功能
添加 up事件php点赞功能实现，学习使用获取父子节点的方法。
为了更好的用户体验，输入框在失去焦点时不会立即变小，所以添加了定时器功能。请注意php点赞功能实现，点击灰色回复按钮时应清除计时器。

js 代码：
textarea.onblur = function(){
          var me = this;//因为有定时器所以先将this存放于变量中
          timer = setTimeout(function(){
            if(me.value == ''){
              me.parentNode.className = 'text-box';
              me.value = '评论...';
            }
          },500);
        }
        textarea.onkeyup = function(){
          var len = this.value.length;
          var p = this.parentNode;
          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.innerHTML = 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.innerHTML = 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 时，单击喜欢按钮时它会增加 1。当 my 的值为 1 时，单击喜欢按钮时它会减少 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',newTotal);
          el.setAttribute('my',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);
        }
      }

以上是小编介绍的评论点赞功能的实现方法。我希望它会对你有所帮助。如果您有任何问题，请给我留言。小编会及时回复您。非常感谢您对  网站的支持！
您可能感兴趣的文章：