原生js实现回复评论功能


Posted in Javascript onJanuary 18, 2017

实现原理

功能1.删除状态

用removeChild()方法即可

功能2.最上面的点赞

判断文字的内容是否为赞,做相应操作改变存放赞数量的容器文本内容

功能3.回复评论

创建一个新的评论添加到评论列表里

功能4.回复里的点赞

判断我是否点了赞,做相应操作

功能5.回复或者删除

判断字符串回复还是删除,做相应操作

代码用了事件代理,还有三元运算判断,减少代码量

每行代码都有详细的注释

一眼看到那么多的代码不要烦躁

其实你要把每个功能单独去看都是很简单的dom操作

一点点消化,读懂每一行代码

完整代码

注:代码复制到本地后替换下图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;border:none; outline: none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover, a:visited, a:link, a:active{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
body{color:#333; font: 12px/1.3 'Arial','Microsoft YaHei';}
#pn{width: 550px; height: auto; background: #fff; margin: 0 auto; padding: 20px;}
.list0{padding: 20px 0; position: relative; border-top: 1px solid #eee;}
.head{width: 60px; float: left;}
.head img{width: 60px; height: 60px; }
.close{width: 20px; height: 20px; position: absolute; top: 0; right: 0; color: #696e78; font-size: 14px; text-align: center; line-height: 20px;}
.close:hover{color: #eb7350;}
.content{width: 450px; line-height: 20px; font-size: 14px; margin-left: 70px; }
.name{color: #eb7350; }
.pic{margin: 5px 0;}
.good:after{clear:both;content:'';display:block;width:0;height:0;visibility:hidden;}
.good{*zoom:1;}
.date{float:left; color: #808080;}
.good a{float: right; color: #808080;}
.people{background: #F7F7F7; height: 28px; line-height: 28px; padding-left: 10px; margin: 5px 0;}
.comment:after{clear:both;content:'';display:block;width:0;height:0;visibility:hidden;}
.comment{*zoom:1; padding: 10px 0; border-top: 1px solid #eee;}
.comment-left{width: 30px; float: left; display: inline; margin-right: 10px;}
.comment-left img{width: 30px; height: 30px;}
.comment-right{float: left; width: 410px;}
.comment-text{line-height: 18px;}
.comment-text span{color:#eb7350;}
.comment-date{font-size: 12px; line-height: 14px; color: #ccc; position: relative;}
.comment-zan{position: absolute; right: 40px; bottom: 0; color: #808080;}
.comment-dele{position: absolute; right: 0; bottom: 0; color: #808080;}
.hf:after{clear:both;content:'';display:block;width:0;height:0;visibility:hidden;}
.hf{*zoom:1;}
.hf-text{ border: 1px solid #eee; display: block; height: 15px; width: 438px; padding: 5px; resize: none; color: #ccc; font-size:12px;}
.hf-on .hf-text{height: 60px; color: #333; border:1px solid #ff8140;}
.hf-btn{float: right; width: 65px; height: 26px; background: #f7f7f7; color: #ccc; font-size: 12px; display: none;}
.hf-btn-on{background: #ff8140; color: #fff; }
.hf-nub{float: right; padding: 3px 5px; color: #666; display: none;}
.hf-on .hf-btn{display: inline;}
.hf-on .hf-nub{display: inline;}
</style> 
</head> 
<body>
 <ul id="pn">
 <li class="list0">
 <a class="close" href="javascript:;">X</a>
 <div class="head"><img src="images/T1.jpg" alt=""/></div>
 <div class="content">
 <p class="text"><span class="name">Andy:</span>哈哈哈哈哈谁还没个妈~//@我的朋友是个呆B: 饮水机那个蕾丝罩我给跪了//@八卦_我实在是太CJ了:仿佛看到了自己家</p> 
 <div class="pic"><img src="images/img1.jpg" alt=""/></div>
 <div class="good"><span class="date">02-14 23:01</span><a class="dzan" href="javascript:;">赞</a></div>
 <div class="people" total="2980">2980人觉得很赞</div>
 <div class="comment-list">
 <div class="comment" user="self">
  <div class="comment-left"><img src="images/T1.jpg" alt=""/></div>
  <div class="comment-right">
  <div class="comment-text"><span class="user">老王:</span>我住隔壁我姓王</div>
  <div class="comment-date">02-14 22:00
  <a class="comment-zan" href="javascript:;" total="23" my="1">23 取消赞</a>
  <a class="comment-dele" href="javascript:;">回复</a>
  </div>
  </div>
 </div>
 <div class="comment" user="self">
  <div class="comment-left"><img src="images/T1.jpg" alt=""/></div>
  <div class="comment-right">
  <div class="comment-text"><span class="user">我:</span>看哭了留卡号吧</div>
  <div class="comment-date">02-14 24:00
  <a class="comment-zan" href="javascript:;" total="0" my="0">赞</a>
  <a class="comment-dele" href="javascript:;">删除</a>
  </div>
  </div>
 </div>
 </div>
 <div class="hf">
 <textarea type="text" class="hf-text" autocomplete="off" maxlength="100">评论…</textarea>
 <button class="hf-btn">回复</button>
 <span class="hf-nub">0/100</span>
 </div>
 </div>
 </li>
 <li class="list0">
 <a class="close" href="javascript:;">X</a>
 <div class="head"><img src="images/T2.jpg" alt=""/></div>
 <div class="content">
 <p class="text"><span class="name">Andy:</span>哈哈哈哈哈谁还没个妈~//@我的朋友是个呆B: 饮水机那个蕾丝罩我给跪了//@八卦_我实在是太CJ了:仿佛看到了自己家</p> 
 <div class="pic"><img src="images/img1.jpg" alt=""/></div>
 <div class="good"><span class="date">02-14 23:01</span><a class="dzan" href="javascript:;">赞</a></div>
 <div class="people" total="0" style="display: none;"></div>
 <div class="comment-list">
 <div class="comment" user="self">
  <div class="comment-left"><img src="images/T2.jpg" alt=""/></div>
  <div class="comment-right">
  <div class="comment-text"><span class="user">我:</span>看哭了留卡号吧</div>
  <div class="comment-date">02-14 24:00
  <a class="comment-zan" href="javascript:;" total="286" my="1">286 取消赞</a>
  <a class="comment-dele" href="javascript:;">删除</a>
  </div>
  </div>
 </div>
 </div>
 <div class="hf">
 <textarea type="text" class="hf-text" autocomplete="off" maxlength="100">评论…</textarea>
 <button class="hf-btn">回复</button>
 <span class="hf-nub">0/100</span>
 </div>
 </div>
 </li>
 </ul>
 <script type="text/javascript"> 
 //在页面加载完后立即执行多个函数。
 function addloadEvent(func){
 var oldonload=window.onload;
 if(typeof window.onload !="function"){
  window.onload=func;
 }
 else{
  window.onload=function(){
  if(oldonload){
   oldonload(); 
  }
  func();
  }
 }
 }
 addloadEvent(b);
 function b(){
 var pn=document.getElementById("pn");
 var lists=pn.children;
 //删除当前节点
 function remove(node){
 node.parentNode.removeChild(node);
 }
 //上面的点赞
 function praisebox(box,el){
 //获取赞数量容器
 var praise=box.getElementsByClassName("people")[0];
 //获取容器当前total值
 var total=parseInt(praise.getAttribute("total"));
 //获取点击的innerHTML
 var txt=el.innerHTML;
 //创建一个新的total存储用
 var newtotal;
 //判断点击的文字内容
 if(txt=="赞"){
 //total值+1 因为我还没点击赞,所以要点击的时候就多了一个人 total+1
 newtotal=total+1;
 //判断赞数量 把相应文字放到赞容器里
 praise.innerHTML=newtotal==1 ? "我觉得很赞" : "我和" + total +"个人觉得很赞";
 el.innerHTML="取消赞";
 }
 else{
 //反之total值-1
 newtotal=total-1;
 praise.innerHTML=newtotal==0 ? "" : newtotal +"个人觉得很赞";
 el.innerHTML="赞";
 }
 //更新total值
 praise.setAttribute("total",newtotal);
 //如果没有人点赞容器隐藏
 praise.style.display=(newtotal==0) ? "none" : "block";
 }
 //回复评论
 function reply(box){
 //获取评论框
 var textarea=box.getElementsByTagName("textarea")[0];
 //获取包含所有评论的容器
 var comment=box.getElementsByClassName("comment-list")[0];
 //创建新的评论div
 var div=document.createElement("div");
 //赋类名
 div.className="comment";
 //设置属性
 div.setAttribute("user","self");
 //获取每条评论的innerHTML结构,每次只替换textarea的输入内容和 当前发送时间
 var html='<div class="comment-left">'+'<img src="images/T2.jpg" alt=""/>'+'</div>'+
  '<div class="comment-right">'+
  '<div class="comment-text"><span>我:</span>'+textarea.value+'</div>'+
  '<div class="comment-date">'+
  getTime()+
  '<a class="comment-zan" href="javascript:;" total="0" my="0">赞</a>'+
  '<a class="comment-dele" href="javascript:;">删除</a>'+
  '</div>'+
  '</div>';
 //插入到新建的评论div
 div.innerHTML=html;
 //把新评论插入到评论列表
 comment.appendChild(div);
 //评论后初始化textarea输入框
 textarea.value="评论…";
 textarea.parentNode.className="hf";
 }
 //获取当前时间回复评论时调用
 function getTime(){
 var t=new Date();
 var y=t.getFullYear();
 var m=t.getMonth()+1;
 var d=t.getDate();
 var h=t.getHours();
 var mi=t.getMinutes();
 m=m<10?"0"+m:m;
 d=d<10?"0"+d:d;
 h=h<10?"0"+h:h;
 mi=mi<10?"0"+mi:mi;
 return y+"-"+m+"-"+d+""+h+":"+mi;
 }
 //回复里点赞
 function praiseReply(el){
 //获取当前total值 也就是所有点赞数量
 var total=parseInt(el.getAttribute("total"));
 //获取当前my值 我的点赞
 var my=parseInt(el.getAttribute("my"));
 //创建新的total
 var newtotal;
 //判断my=0就是我准备要点赞
 if(my==0){
 //我点了赞总数量就要+1
 newtotal=total+1;
 //更新total值
 el.setAttribute("total",newtotal);
 //更新my值
 el.setAttribute("my",1);
 //更新文字 就是我点了后 文字就是取消赞了
 el.innerHTML=newtotal+" 取消赞";
 }else{
 //反之-1
 newtotal=total-1;
 el.setAttribute("total",newtotal);
 el.setAttribute("my",0);
 el.innerHTML=(newtotal==0)?" 赞":newtotal+" 赞";
 }
 }
 //操作回复
 function operateReply(el){
 //每条评论
 var comment=el.parentNode.parentNode.parentNode;
 //整个状态
 var box=comment.parentNode.parentNode.parentNode;
 //评论框
 var textarea=box.getElementsByTagName("textarea")[0];
 //名字
 var user=comment.getElementsByClassName("user")[0];
 //点击的innerHTML
 var txt=el.innerHTML;
 //判断当前点击的是否为回复
 if(txt=="回复"){
 //评论框触发焦点事件 也就是变高
 textarea.onfocus();
 //内容变为回复+当前人的名字
 textarea.value="回复 "+user.innerHTML;
 //调用键盘事件
 textarea.onkeyup();
 }else{
 //否则就是删除节点
 remove(comment);
 }
 }
 //遍历所有状态消息
 for(var i=0;i<lists.length;i++){
 //全部事件代理
 lists[i].onclick=function(e){
 //获取当前点击事件
 var e=e||window.event;
 var el=e.srcElement;
 if(!el){
 el=e.target;//兼容火狐
 }
 //判断点击的类名
 switch(el.className){
 //关闭整个状态
 case "close":
 remove(el.parentNode);
 break;
 //上面的点赞
 case "dzan":
 praisebox(el.parentNode.parentNode.parentNode,el);
 break;
 //回复评论
 case "hf-btn hf-btn-on":
 reply(el.parentNode.parentNode.parentNode);
 break;
 //每条评论中点赞
 case "comment-zan":
 praiseReply(el);
 break;
 case "comment-dele":
 operateReply(el);
 break;
 }
 }
 var textarea=lists[i].getElementsByClassName("hf-text")[0];
 //焦点事件
 textarea.onfocus=function(){
 this.parentNode.className='hf hf-on';
 this.value = this.value == '评论…' ? '' : this.value;
 }
 //失焦事件
 textarea.onblur=function(){
 if(this.value==''){
 this.parentNode.className='hf';
 this.value ='评论…'; 
 } 
 }
 //键盘事件
 textarea.onkeyup=function(){
 var len=this.value.length;
 var textParentNode=this.parentNode;
 var textBtn=textParentNode.children[1];
 var textNub=textParentNode.children[2];
 if(len==0 /*|| len>100*/){
 textBtn.className="hf-btn";
 }else{
 textBtn.className="hf-btn hf-btn-on";
 /*this.style.color="#333"; */ 
 }
 textNub.innerHTML=len+"/100";
 }
 }
 //遍历结束
 } 
 </script>
</body> 
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
TBCompressor js代码压缩
Jan 05 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
常用jQuery选择器总结
Jul 11 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
js实现表格筛选功能
Jan 18 #Javascript
js放大镜放大购物图片效果
Jan 18 #Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 #Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 #Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 #Javascript
jQuery中的一些小技巧
Jan 18 #Javascript
AngularJS Select(选择框)使用详解
Jan 18 #Javascript
You might like
php Mysql日期和时间函数集合
2007/11/16 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
javascript  删除select中的所有option的实例
2017/09/17 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
Python logging模块学习笔记
2014/05/24 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
多个应用共存的Django配置方法
2018/05/30 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
Django保护敏感信息的方法示例
2019/05/09 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
零基础小白多久能学会python
2020/06/22 Python
美国网上订购鲜花:FTD
2016/09/23 全球购物
酒店副总岗位职责
2013/12/24 职场文书
夜不归宿检讨书
2014/02/25 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
保护环境建议书100字
2014/05/13 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
python中使用redis用法详解
2022/12/24 Redis