原生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 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
对比分析json及XML
Nov 28 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
vue项目前端知识点整理【收藏】
May 13 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 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
一个简单实现多条件查询的例子
2006/10/09 PHP
php 动态执行带有参数的类方法
2009/04/10 PHP
学习php笔记 字符串处理
2010/10/19 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
在Python的Django框架中编写编译函数
2015/07/20 Python
python框架中flask知识点总结
2018/08/17 Python
python递归实现快速排序
2018/08/18 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
Python with语句用法原理详解
2020/07/03 Python
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
合唱兴趣小组活动总结
2014/07/10 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
志愿者个人总结
2015/03/03 职场文书
放假通知
2015/04/14 职场文书
Python进度条的使用
2021/05/17 Python
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android