通過分析評論功能的邏輯關系，學會如何使用JavaScript實現評論、回復、點贊等各種功能
1.學會JavaScript處理日期和時間。
2.掌握Dom操作中的添加/刪除子節點方法。
3.使用setTimeout設置定時器。
4.使用clearTimeout清除定時器以及事件代理的運用。
效果圖：
1）實現刪除分享內容功能
利用事件代理實現點擊關閉按鈕刪除分享內容。
刪除事件:
利用事件代理功能,在父元素節點上添加事件,以減少代碼量和系統運行負荷.
事件代理的時候，使用事件對象中的srcElement屬性,獲取觸發元素。
IE瀏覽器支持window.event.srcElement ， 而firefox支持window.event.target。
所以，要想在firefox里面兼容只需要改一個代碼：把var el = e.srcElement 改成 var el = e.srcElement || e.target
removeChild()指刪除孩子元素，所以要刪除當前元素el,先要使用parentNode找到父節點，然后在使用removeChild(el)刪除el元素。
var list = document.getElementById('list'); var boxs = document.getElementsByClassName('box'); //刪除節點函數 function removeNode(node){ node.parentNode.removeChild(node); } //事件代理 for(var i=0 ;i<boxs.length;i++){ boxs[i].onclick = function(e){ e = e||window.event; var el = e.srcElement || e.target; switch (el.className) { case 'close':removeNode(el.parentNode);break; } } }2)實現分享的點贊功能
構造一個點贊分享的函數，需要兩個參數，第一個參數（box）表示所點贊的最外層父容器，第二個參數（el）指觸發的元素，即贊的那個按鈕
getAttribute()獲得屬性，使用setAttribute()來設置元素的屬性。
js代碼：
//點贊分享 function praiseBox(box,el){//box為所觸發元素el的最外層父容器 var praiseElement = box.getElementsByClassName('praise-total')[0]; var oldTotal = parseInt(praiseElement.getAttribute('total')); var txt = el.innerHTML; var newTotal = 0; if(txt == '贊'){ newTotal = oldTotal + 1; praiseElement.innerHTML = (newTotal == 1) ? '我覺得很贊' : '我和' + oldTotal +'個人覺得很贊'; el.innerHTML = '取消贊'; }else{ newTotal = oldTotal - 1; praiseElement.innerHTML = (newTotal == 0) ? '' : newTotal + '個人覺得很贊'; el.innerHTML = '贊'; } praiseElement.setAttribute('total',newTotal); praiseElement.style.display = (newTotal == 0) ? 'none': 'block'; } //事件代理 for(var i=0 ;i<boxs.length;i++){ boxs[i].onclick = function(e){ e = e||window.event; var el = e.srcElement || e.target; switch (el.className) { case 'close':removeNode(el.parentNode);break; case 'praise':praiseBox(el.parentNode.parentNode.parentNode,el); } } }3)實現評論功能
首先要實現評論輸入框的改變，通過監聽三個事件
1.獲得焦點時：onfocus
2.失去焦點：onblur
3.鼠標輸入彈起來的時候：onkeyup
//輸入框 var textarea = boxs[i].getElementsByTagName('textarea')[0]; textarea.onfocus = function(){ this.parentNode.className = 'text-box text-box-on'; this.value = (this.value == '評論...') ? '':this.value; } textarea.onblur = function(){ if(this.value == ''){ this.parentNode.className = 'text-box'; this.value = '評論...'; } }4）實現回復按鈕和字數統計功能
對textarea添加onkeyup鍵盤彈起事件，學會利用獲取父節點和孩子節點的方法。
為了更好的用戶體驗，使輸入框失去焦點時不是立即變小，所以在onblur中增加一個定時器功能，注意當點擊灰色回復按鈕時要清除定時器
js代碼:
textarea.onblur = function(){ var me = this;//因為有定時器所以先將this存放于變量中 timer = setTimeout(function(){ if(me.value == ''){ me.parentNode.className = 'text-box'; me.value = '評論...'; } },500); } textarea.onkeyup = function(){ var len = this.value.length; var p = this.parentNode; var btn = p.children[1]; var word = p.children[2]; if(len == 0 || len > 140){ btn.className = 'btn btn-off'; }else{ btn.className = 'btn'; } word.innerHTML = len + '/140'; }5）實現評論分享功能
當點擊回復按鈕時，將輸入框的內容添加到回復列表中，是通過創建一個div，新增一個回復列表，注意改變新增回復列表的部分內容以及要改變評論的日期。
js代碼：
//發表評論 function replayBox(box){ var textarea = box.getElementsByTagName('textarea')[0]; var list = box.getElementsByClassName('comment-list')[0]; var div = document.createElement('div'); div.className = 'comment-box clearfix'; div.setAttribute('user','self'); var html = ' <img src="images/my.jpg" class="myhead" alt="" />'+ '<div class="comment-content">'+ '<p class="comment-text"><span class="user">我：</span>'+textarea.value+'</p>'+ '<p class="comment-time">'+ getTime()+ '<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="comment-praise" total="0" my="0" style="">贊</a>'+ '<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="comment-operate">刪除</a>'+ '</p>'+ '</div>'; div.innerHTML = html; list.appendChild(div); textarea.value = ''; textarea.onblur(); function getTime(){ var t = new Date(); var y = t.getFullYear(); var m = t.getMonth() + 1;//月份是從0開始 var d = t.getDay(); var h = t.getHours(); var mi = t.getMinutes(); m = m>10 ? m: '0' + m; d = d>10 ? d: '0' + d; h = h>10 ? h: '0' + h; mi = mi>10 ?mi: '0' +mi; return y + '-' + m + '-' + d + ' ' + h + ':' + mi; } }5）實現點贊回復功能
點贊按鈕的a標簽中有個my屬性，表示自己是否已點贊，當my值為0時，點擊贊按鈕時total會加一，當my值為1時，點擊贊按鈕時total減1。
js代碼：
//點贊回復 function praiseReplay(el){ var oldTotal = parseInt(el.getAttribute('total')); var my = parseInt(el.getAttribute('my')); var newTotal = 0; if(my == 0){ newTotal = oldTotal + 1; el.setAttribute('total',newTotal); el.setAttribute('my',1); el.innerHTML = newTotal + '取消贊'; }else{ newTotal = oldTotal - 1; el.setAttribute('total',newTotal); el.setAttribute('my',0); el.innerHTML = (newTotal == 0) ? '' : newTotal + '贊'; } el.style.display = (newTotal == 0) ? '' : 'inline-block'; }6）實現回復列表中內容的刪除和回復功能
實現回復他人的評論及刪除自己的評論
js代碼：
//操作回復 function operateReply(el){ var commentBox = el.parentNode.parentNode.parentNode;//評論的容器 var box = commentBox.parentNode.parentNode.parentNode;//該條分享的容器 var textarea = box.getElementsByTagName('textarea')[0]; var user = commentBox.getElementsByClassName('user')[0]; var txt = el.innerHTML; if(txt == '回復'){ textarea.onfocus(); textarea.value = '回復' + user.innerHTML; textarea.onkeyup(); } else{ removeNode(el.parentNode.parentNode.parentNode); } }以上所述是小編給大家介紹的JavaScript評論點贊功能的實現方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
