JavaScript评论点赞功能的实现方法


Posted in Javascript onMarch 13, 2017

通过分析评论功能的逻辑关系,学会如何使用JavaScript实现评论、回复、点赞等各种功能

1.学会JavaScript处理日期和时间。

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

3.使用setTimeout设置定时器。

4.使用clearTimeout清除定时器以及事件代理的运用。

效果图:

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

Javascript 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
小程序云开发之用户注册登录
May 18 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 #Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 #Javascript
JS实现直接运行html代码的方法
Mar 13 #Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 #Javascript
jsonp跨域请求实现示例
Mar 13 #Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 #Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 #Javascript
You might like
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
php批量修改表结构实例
2017/05/24 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Python实现的特征提取操作示例
2018/12/03 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
造型师求职自荐信
2013/09/27 职场文书
妇科医生自荐信
2013/11/05 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
新学期家长寄语
2014/01/19 职场文书
投资协议书范本
2014/04/21 职场文书
抽样调查项目计划书
2014/04/24 职场文书
农村门前三包责任书
2014/07/25 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
在人间读书笔记
2015/06/30 职场文书
2019各种保证书范文
2019/06/24 职场文书
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang