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

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评论点赞功能的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# js实现评论点赞功能  # js实现网页自动刷新可制作节日倒计时效果  # javascript实现带节日和农历的日历特效  # js判断节假日实例代码  # 程序员的新年祝福 Happy New Year  # JS实现简单的点赞与踩功能示例  # javascript实现手动点赞效果  # js实现点赞按钮功能的实例代码  # js实现点赞效果  # js实现简单点赞操作  # JavaScript实现点赞功能的示例  # 输入框  # 小编  # 觉得很  # 值为  # 自己的  # 最外层  # 有个  # 第一个  # 鼠标  # 我和  # 在此  # 列表中  # 是从  # 要想  # 第二个  # 给大家  # 只需要  # 等各种  # 时要  # 先将 

相关文章： 学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？  如何通过智能用户系统一键生成高效建站方案？  建站168自助建站系统：快速模板定制与SEO优化指南  高防服务器租用指南：配置选择与快速部署攻略  ,有什么在线背英语单词效率比较高的网站？  javascript中的try catch异常捕获机制用法分析  如何通过山东自助建站平台快速注册域名？  美食网站链接制作教程视频,哪个教做美食的网站比较专业点？  详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode（.NET组件介绍之四）  Swift中循环语句中的转移语句 break 和 continue  建站之星客服服务时间及联系方式如何？  如何快速搭建FTP站点实现文件共享？  如何用西部建站助手快速创建专业网站？  如何在阿里云服务器自主搭建网站？  如何在Golang中实现微服务服务拆分_Golang微服务拆分与接口管理方法  威客平台建站流程解析：高效搭建教程与设计优化方案  深圳网站制作培训,深圳哪些招聘网站比较好？  保定网站制作方案定制,保定招聘的渠道有哪些？找工作的人一般都去哪里看招聘信息？  七夕网站制作视频,七夕大促活动怎么报名？  高端网站建设与定制开发一站式解决方案 中企动力  如何用花生壳三步快速搭建专属网站？  如何基于云服务器快速搭建网站及云盘系统？  已有域名和空间如何搭建网站？  再谈Python中的字符串与字符编码（推荐）  如何通过.red域名打造高辨识度品牌网站？  制作网站的网址是什么,请问后缀为.com和.com.cn还有.cn的这三种网站是分别是什么类型的网站？  宁波自助建站系统如何快速打造专业企业网站？  如何快速上传自定义模板至建站之星？  如何在Golang中指定模块版本_使用go.mod控制版本号  制作网站的软件免费下载,免费制作app哪个平台好？  高防服务器如何保障网站安全无虞？  如何在云主机上快速搭建多站点网站？  宝塔面板创建网站无法访问？如何快速排查修复？  高端建站如何打造兼具美学与转化的品牌官网？  学校建站服务器如何选型才能满足性能需求？  商务网站制作工程师,从哪几个方面把握电子商务网站主页和页面的特色设计？  ,石家庄四十八中学官网？  Dapper的Execute方法的返回值是什么意思 Dapper Execute返回值详解  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  如何通过NAT技术实现内网高效建站？  成都网站制作价格表,现在成都广电的单独网络宽带有多少的，资费是什么情况呢？  如何在自有机房高效搭建专业网站？  网站制作专业公司有哪些,如何制作一个企业网站，建设网站的基本步骤有哪些？  Python lxml的etree和ElementTree有什么区别  大连网站制作公司哪家好一点,大连买房网站哪个好？  如何选择高效稳定的ISP建站解决方案？  建站之星安装后如何自定义网站颜色与字体？  如何在云主机快速搭建网站站点？  开封网站制作公司,网络用语开封是什么意思？  网站制作说明怎么写,简述网页设计的流程并说明原因？