js点赞功能的实现代码

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

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代码：

//点赞分享

      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

//输入框

        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、实现回复按钮和字数统计功能

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

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

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 = ' <img src="images/my.jpg" class="myhead" alt="" />'+

            '<div class="comment-content">'+

            '<p class="comment-text"><span class="user">我：</span>'+textarea.value+'</p>'+

            '<p class="comment-time">'+

            getTime()+

            '<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="comment-praise" total="0" my="0" style="">赞</a>'+

            '<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="comment-operate">删除</a>'+

            '</p>'+

            '</div>';

        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时，点击赞按钮时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',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);

       }

     }

 

以上所述是小编给大家介绍的JavaScript评论点赞功能的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知