JavaScript評論點贊功能的實現(xiàn)方法
通過分析評論功能的邏輯關系，學會如何使用JavaScript實現(xiàn)評論、回復、點贊等各種功能
1.學會JavaScript處理日期和時間。
2.掌握Dom操作中的添加/刪除子節(jié)點方法。
3.使用setTimeout設置定時器。
4.使用clearTimeout清除定時器以及事件代理的運用。
效果圖：
1）實現(xiàn)刪除分享內(nèi)容功能
利用事件代理實現(xiàn)點擊關閉按鈕刪除分享內(nèi)容。
刪除事件:
利用事件代理功能,在父元素節(jié)點上添加事件,以減少代碼量和系統(tǒng)運行負荷.
事件代理的時候，使用事件對象中的srcElement屬性,獲取觸發(fā)元素。
IE瀏覽器支持window.event.srcElement ， 而firefox支持window.event.target。
所以，要想在firefox里面兼容只需要改一個代碼：把var el = e.srcElement 改成 var el = e.srcElement || e.target
removeChild()指刪除孩子元素，所以要刪除當前元素el,先要使用parentNode找到父節(jié)點，然后在使用removeChild(el)刪除el元素。
var list = document.getElementById('list');
var boxs = document.getElementsByClassName('box');
//刪除節(jié)點函數(shù)
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)實現(xiàn)分享的點贊功能
構(gòu)造一個點贊分享的函數(shù)，需要兩個參數(shù)，第一個參數(shù)（box）表示所點贊的最外層父容器，第二個參數(shù)（el）指觸發(fā)的元素，即贊的那個按鈕
getAttribute()獲得屬性，使用setAttribute()來設置元素的屬性。
js代碼：
//點贊分享
function praiseBox(box,el){//box為所觸發(fā)元素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)實現(xiàn)評論功能
首先要實現(xiàn)評論輸入框的改變，通過監(jiān)聽三個事件
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）實現(xiàn)回復按鈕和字數(shù)統(tǒng)計功能
對textarea添加onkeyup鍵盤彈起事件，學會利用獲取父節(jié)點和孩子節(jié)點的方法。
為了更好的用戶體驗，使輸入框失去焦點時不是立即變小，所以在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）實現(xiàn)評論分享功能
當點擊回復按鈕時，將輸入框的內(nèi)容添加到回復列表中，是通過創(chuàng)建一個div，新增一個回復列表，注意改變新增回復列表的部分內(nèi)容以及要改變評論的日期。
js代碼：
//發(fā)表評論
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）實現(xiàn)點贊回復功能
點贊按鈕的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）實現(xiàn)回復列表中內(nèi)容的刪除和回復功能
實現(xiàn)回復他人的評論及刪除自己的評論
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評論點贊功能的實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
驗證碼,這一日常伴隨我們的要素,是我們在線交互的重要安全保障,你的手機短信里是否被它占據(jù)半壁江山,今天我們就來聊聊如何在網(wǎng)頁上實現(xiàn)一個簡單的驗證碼組件,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)彈出菜單動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
使用js對select動態(tài)添加和刪除OPTION示例代碼
動態(tài)刪除select中的所有options、某一項option以及動態(tài)添加select中的項option，在IE和FireFox都能測試成功，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要介紹了JS簡單模擬觸發(fā)按鈕點擊功能的方法,涉及JavaScript事件調(diào)用機制及事件觸發(fā)的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細介紹了bootstrapTable實現(xiàn)合并相同行，fastadmin框架同樣使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
JavaScript為事件句柄綁定監(jiān)聽函數(shù)實例詳解
這篇文章主要介紹了JavaScript為事件句柄綁定監(jiān)聽函數(shù)的方法,結(jié)合實例詳細分析了常見的事件句柄綁定監(jiān)聽函數(shù)的實現(xiàn)技巧,并實例講解了跨瀏覽器的實現(xiàn)方法,需要的朋友可以參考下2015-12-12
主要是修復了如果層上有東東的話，點擊也消失的情況2008-09-09
獲取HTML DOM節(jié)點元素的方法的總結(jié)
在Web應用程序特別是Web2.0程序開發(fā)中，經(jīng)常要獲取頁面中某個元素，然后更新該元素的樣式、內(nèi)容等。如何獲取要更新的元素，是首先要解決的問題。2009-08-08
Javascript拖拽系列文章1之offsetParent屬性
這個系列文章主要是講述實現(xiàn)Javascript拖拽功能的基礎知識，并將在最后給出一個完整的示例。適合對拖拽完全不懂的人閱讀2008-09-09
JavaScript代碼判斷輸入的字符串是否含有特殊字符和表情代碼實例
這篇文章主要介紹了JavaScript代碼判斷輸入的字符串是否含有特殊字符和表情，通過js代碼if語句進行判斷，并結(jié)合自己開發(fā)的情景，具體操作步驟大家可查看下文的詳細講解，感興趣的小伙伴們可以參考一下。2017-08-08