原生js實現(xiàn)回復(fù)評論功能

發(fā)布時間：2020-10-11 20:54:13 來源：腳本之家閱讀：236 作者：夏天不做夢欄目：web開發(fā)
實現(xiàn)原理
功能1.刪除狀態(tài)
用removeChild()方法即可
功能2.最上面的點贊
判斷文字的內(nèi)容是否為贊，做相應(yīng)操作改變存放贊數(shù)量的容器文本內(nèi)容
功能3.回復(fù)評論
創(chuàng)建一個新的評論添加到評論列表里
功能4.回復(fù)里的點贊
判斷我是否點了贊，做相應(yīng)操作
功能5.回復(fù)或者刪除
判斷字符串回復(fù)還是刪除，做相應(yīng)操作
代碼用了事件代理，還有三元運算判斷，減少代碼量
每行代碼都有詳細(xì)的注釋
一眼看到那么多的代碼不要煩躁
其實你要把每個功能單獨去看都是很簡單的dom操作
一點點消化，讀懂每一行代碼
完整代碼
注：代碼復(fù)制到本地后替換下圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h2,h3,h4,h5,h6,h7,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;}
h2,h3,h4,h5,h6,h7{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:;">回復(fù)</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">回復(fù)</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" ></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">回復(fù)</button>
 <span class="hf-nub">0/100</span>
 </div>
 </div>
 </li>
 </ul>
 <script type="text/javascript"> 
 //在頁面加載完后立即執(zhí)行多個函數(shù)。
 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;
 //刪除當(dāng)前節(jié)點
 function remove(node){
 node.parentNode.removeChild(node);
 }
 //上面的點贊
 function praisebox(box,el){
 //獲取贊數(shù)量容器
 var praise=box.getElementsByClassName("people")[0];
 //獲取容器當(dāng)前total值
 var total=parseInt(praise.getAttribute("total"));
 //獲取點擊的innerHTML
 var txt=el.innerHTML;
 //創(chuàng)建一個新的total存儲用
 var newtotal;
 //判斷點擊的文字內(nèi)容
 if(txt=="贊"){
 //total值+1 因為我還沒點擊贊，所以要點擊的時候就多了一個人 total+1
 newtotal=total+1;
 //判斷贊數(shù)量 把相應(yīng)文字放到贊容器里
 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";
 }
 //回復(fù)評論
 function reply(box){
 //獲取評論框
 var textarea=box.getElementsByTagName("textarea")[0];
 //獲取包含所有評論的容器
 var comment=box.getElementsByClassName("comment-list")[0];
 //創(chuàng)建新的評論div
 var div=document.createElement("div");
 //賦類名
 div.className="comment";
 //設(shè)置屬性
 div.setAttribute("user","self");
 //獲取每條評論的innerHTML結(jié)構(gòu)，每次只替換textarea的輸入內(nèi)容和 當(dāng)前發(fā)送時間
 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";
 }
 //獲取當(dāng)前時間回復(fù)評論時調(diào)用
 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;
 }
 //回復(fù)里點贊
 function praiseReply(el){
 //獲取當(dāng)前total值 也就是所有點贊數(shù)量
 var total=parseInt(el.getAttribute("total"));
 //獲取當(dāng)前my值 我的點贊
 var my=parseInt(el.getAttribute("my"));
 //創(chuàng)建新的total
 var newtotal;
 //判斷my=0就是我準(zhǔn)備要點贊
 if(my==0){
 //我點了贊總數(shù)量就要+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+" 贊";
 }
 }
 //操作回復(fù)
 function operateReply(el){
 //每條評論
 var comment=el.parentNode.parentNode.parentNode;
 //整個狀態(tài)
 var box=comment.parentNode.parentNode.parentNode;
 //評論框
 var textarea=box.getElementsByTagName("textarea")[0];
 //名字
 var user=comment.getElementsByClassName("user")[0];
 //點擊的innerHTML
 var txt=el.innerHTML;
 //判斷當(dāng)前點擊的是否為回復(fù)
 if(txt=="回復(fù)"){
 //評論框觸發(fā)焦點事件 也就是變高
 textarea.onfocus();
 //內(nèi)容變?yōu)榛貜?fù)+當(dāng)前人的名字
 textarea.value="回復(fù) "+user.innerHTML;
 //調(diào)用鍵盤事件
 textarea.onkeyup();
 }else{
 //否則就是刪除節(jié)點
 remove(comment);
 }
 }
 //遍歷所有狀態(tài)消息
 for(var i=0;i<lists.length;i++){
 //全部事件代理
 lists[i].onclick=function(e){
 //獲取當(dāng)前點擊事件
 var e=e||window.event;
 var el=e.srcElement;
 if(!el){
 el=e.target;//兼容火狐
 }
 //判斷點擊的類名
 switch(el.className){
 //關(guān)閉整個狀態(tài)
 case "close":
 remove(el.parentNode);
 break;
 //上面的點贊
 case "dzan":
 praisebox(el.parentNode.parentNode.parentNode,el);
 break;
 //回復(fù)評論
 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";
 }
 }
 //遍歷結(jié)束
 } 
 </script>
</body> 
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持億速云！
向AI問一下細(xì)節(jié)
原生js實現(xiàn)回復(fù)評論功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽
