原生js实现回复评论功能

2024-10-01 18:35:40

实现原理

功能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实现评论.回复.点赞等各种功能 1.学会JavaScript处理日期和时间. 2.掌握Dom操作中的添加/删除子节点方法. 3.使用setTimeout设置定时器. 4.使用clearTimeout清除定时器以及事件代理的运用. 效果图: 1)实现删除分享内容功能利用事件代理实现点击关闭按钮删除分享内容. 删除事件: 利用事件代理功能,在父元素节点上添加事件,以减少代码量和系统运行负荷. 事件代理的时候,使用事件对象中的srcElem
Vue.js实现文章评论和回复评论功能

本来想把这个页面用jade渲染出来.评论部分用vue,但是想了想觉得麻烦,最后还是整个用vue的组件搞定他吧. 先上在线demo:http://jsbin.com/ceqifo/1/edit?js,output 再上效果图可直接评论,点击别人的评论能回复别人的评论. html <div id="comment"> <article-content v-bind:article="article"></article-content&g
vue.js评论发布信息可插入QQ表情功能

本文实例为大家分享了vue.js评论发布信息可插入QQ表情,供大家参考,具体内容如下 demo例子: HTML文本内容: <template> <div id="publish">  <div class="publish_container"> <p contenteditable
JavaScript实现QQ聊天消息展示和评论提交功能

QQ聊天消息显示,提交评论等实现原理,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .bos { margin: 100px auto; width: 350px; posi
JavaScript实现简单评论功能

本文实例为大家分享了JavaScript实现简单评论功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ /*background-image: url(../img/91R58PIC3n2_1024
JavaScript直播评论发弹幕切图功能点集合效果代码

一.代码 html+js <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>数发直播平台</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="styl
vue.js实现用户评论、登录、注册、及修改信息功能

vue.js实现用户评论.登录.注册.及修改用户部分信息功能代码.效果图如下: 登入后: 登入前: 登录框: 注册框: html代码部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>index</title> <link rel="stylesheet" href=&quo
原生js实现回复评论功能

实现原理功能1.删除状态用removeChild()方法即可功能2.最上面的点赞判断文字的内容是否为赞,做相应操作改变存放赞数量的容器文本内容功能3.回复评论创建一个新的评论添加到评论列表里功能4.回复里的点赞判断我是否点了赞,做相应操作功能5.回复或者删除判断字符串回复还是删除,做相应操作代码用了事件代理,还有三元运算判断,减少代码量每行代码都有详细的注释一眼看到那么多的代码不要烦躁其实你要把每个功能单独去看都是很简单的dom操作一点点消化,读懂每一行代码完整代
原生js实现拖拽功能基本思路详解

如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒. 1.onmousedown:鼠标按下事件 2.onmousemove:鼠标移动事件 3.onmouseup:鼠标抬起事件拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素.鼠标的移动也就是x.y坐标的变化;元素的移动就是style.position的 top和left的改变.当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的. 基本思路如下: 拖拽状态
原生JS实现的双色球功能示例

本文实例讲述了原生JS实现的双色球功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net - JS双色球</title> <style> #datePicker { width: 100px; hei
原生JS实现的碰撞检测功能示例

本文实例讲述了原生JS实现的碰撞检测功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS碰撞检测</title> <style> div{width:100px; height:100px; } #box{background:red; position:absolu
原生js+cookie实现购物车功能的方法分析

本文实例讲述了原生js+cookie实现购物车功能的方法.分享给大家供大家参考,具体如下: 这里使用js+cookie实现简单的购物车功能. 首先是简单的HTML结构,只是为了演示下功能. <ul> <li><span>a0001</span><span>shdfi</span><span>￥98.00</span> <input type="button" value="加
thinkPHP框架实现的无限回复评论功能示例

本文实例讲述了thinkPHP框架实现的无限回复评论功能.分享给大家供大家参考,具体如下: 如果只是简单的单回复的评论的话,那样操作是很简单的.但问题就是如何实现无限的回复评论呢!那么如果只是单回复的话,需要建好多的数据表,是根本不可能实现的.那么用TP框架实现无限回复评论(GitHub源代码下载地址:https://github.com/Jonybin/responsemessage)下载完成后,注意数据库的使用. control控制器部分: function CommentList($pid
原生Js实现的画廊功能

原生Js实现画廊功能,点击图片,在下方出现相应放大图片.给a标签绑定onclick点击事件.这里上方的小图和下方将要展示大图,都是同一张图片,只是上下两个img的style中设置了不同的width和heigth.(如果不想设置width.height,另一种方法就是将a标签里src的图片存成大图,img展示的是小图.)通过Js点击事件结合css实现大图显示或隐藏,切换图片具体如下图,代码附上第一种 <html lang="en"> <head>
原生JS实现简单计算器功能

本文实例为大家分享了JS实现简单计算器功能的具体代码,供大家参考,具体内容如下使用html和css写出计算器的基本结构和样式,用原生JS实现计算器的加减乘除运算功能,只能计算简单的两位数的运算,不支持三个数连加或者连乘等等.一次计算完成之后再进行下一次运算不需要clear,可以直接进行下次运算.具体实现如下: html结构: <div id="box">
原生js实现随机点名功能

本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下原生js实现随机点名,js部分有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"

原生js实现回复评论功能

相关推荐

随机推荐