首頁 > 開發者 > JavaScript
原生js實現回複評論功能，js評論功能
實現原理
功能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;//相容Firefox } //判斷點擊的類名 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>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的協助，同時也希望多多支援幫客之家！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
