這篇文章主要講解了“JavaScript怎么實(shí)現(xiàn)評(píng)論點(diǎn)贊功能”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“JavaScript怎么實(shí)現(xiàn)評(píng)論點(diǎn)贊功能”吧！
創(chuàng)新互聯(lián)公司是專業(yè)的華亭網(wǎng)站建設(shè)公司，華亭接單;提供成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行華亭網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
效果圖：
1）實(shí)現(xiàn)刪除分享內(nèi)容功能
利用事件代理實(shí)現(xiàn)點(diǎn)擊關(guān)閉按鈕刪除分享內(nèi)容。
刪除事件:
利用事件代理功能,在父元素節(jié)點(diǎn)上添加事件,以減少代碼量和系統(tǒng)運(yùn)行負(fù)荷.
事件代理的時(shí)候，使用事件對(duì)象中的srcElement屬性,獲取觸發(fā)元素。
IE瀏覽器支持window.event.srcElement ， 而firefox支持window.event.target。
所以，要想在firefox里面兼容只需要改一個(gè)代碼：把var el = e.srcElement 改成 var el = e.srcElement || e.target
removeChild()指刪除孩子元素，所以要?jiǎng)h除當(dāng)前元素el,先要使用parentNode找到父節(jié)點(diǎn)，然后在使用removeChild(el)刪除el元素。
重慶分公司
重慶分公司
var list = document.getElementById('list');
var boxs = document.getElementsByClassName('box');
//刪除節(jié)點(diǎn)函數(shù)
function removeNode(node){
node.parentNode.removeChild(node);
}
//事件代理
for(var i=0 ;i2)實(shí)現(xiàn)分享的點(diǎn)贊功能
構(gòu)造一個(gè)點(diǎn)贊分享的函數(shù)，需要兩個(gè)參數(shù)，第一個(gè)參數(shù)（box）表示所點(diǎn)贊的最外層父容器，第二個(gè)參數(shù)（el）指觸發(fā)的元素，即贊的那個(gè)按鈕
getAttribute()獲得屬性，使用setAttribute()來(lái)設(shè)置元素的屬性。
js代碼：
//點(diǎn)贊分享
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) ? '我覺(jué)得很贊' : '我和' + oldTotal +'個(gè)人覺(jué)得很贊';
el.innerHTML = '取消贊';
}else{
newTotal = oldTotal - 1;
praiseElement.innerHTML = (newTotal == 0) ? '' : newTotal + '個(gè)人覺(jué)得很贊';
el.innerHTML = '贊';
}
praiseElement.setAttribute('total',newTotal);
praiseElement.style.display = (newTotal == 0) ? 'none': 'block';
}
//事件代理
for(var i=0 ;i3)實(shí)現(xiàn)評(píng)論功能
首先要實(shí)現(xiàn)評(píng)論輸入框的改變，通過(guò)監(jiān)聽(tīng)三個(gè)事件
1.獲得焦點(diǎn)時(shí)：onfocus
2.失去焦點(diǎn)：onblur
3.鼠標(biāo)輸入彈起來(lái)的時(shí)候：onkeyup
//輸入框
var textarea = boxs[i].getElementsByTagName('textarea')[0];
textarea.onfocus = function(){
this.parentNode.className = 'text-box text-box-on';
this.value = (this.value == '評(píng)論...') ? '':this.value;
}
textarea.onblur = function(){
if(this.value == ''){
this.parentNode.className = 'text-box';
this.value = '評(píng)論...';
}
}4）實(shí)現(xiàn)回復(fù)按鈕和字?jǐn)?shù)統(tǒng)計(jì)功能
對(duì)textarea添加onkeyup鍵盤彈起事件，學(xué)會(huì)利用獲取父節(jié)點(diǎn)和孩子節(jié)點(diǎn)的方法。
為了更好的用戶體驗(yàn)，使輸入框失去焦點(diǎn)時(shí)不是立即變小，所以在onblur中增加一個(gè)定時(shí)器功能，注意當(dāng)點(diǎn)擊灰色回復(fù)按鈕時(shí)要清除定時(shí)器
js代碼:
textarea.onblur = function(){
var me = this;//因?yàn)橛卸〞r(shí)器所以先將this存放于變量中
timer = setTimeout(function(){
if(me.value == ''){
me.parentNode.className = 'text-box';
me.value = '評(píng)論...';
}
},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）實(shí)現(xiàn)評(píng)論分享功能
當(dāng)點(diǎn)擊回復(fù)按鈕時(shí)，將輸入框的內(nèi)容添加到回復(fù)列表中，是通過(guò)創(chuàng)建一個(gè)div，新增一個(gè)回復(fù)列表，注意改變新增回復(fù)列表的部分內(nèi)容以及要改變?cè)u(píng)論的日期。
js代碼：
//發(fā)表評(píng)論
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 = ' '+
'我：'+textarea.value+''+
''+
getTime()+
'贊'+
'刪除'+
''+
' 5）實(shí)現(xiàn)點(diǎn)贊回復(fù)功能
點(diǎn)贊按鈕的a標(biāo)簽中有個(gè)my屬性，表示自己是否已點(diǎn)贊，當(dāng)my值為0時(shí)，點(diǎn)擊贊按鈕時(shí)total會(huì)加一，當(dāng)my值為1時(shí)，點(diǎn)擊贊按鈕時(shí)total減1。
js代碼：
//點(diǎn)贊回復(fù)
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）實(shí)現(xiàn)回復(fù)列表中內(nèi)容的刪除和回復(fù)功能
實(shí)現(xiàn)回復(fù)他人的評(píng)論及刪除自己的評(píng)論
js代碼：
//操作回復(fù)
function operateReply(el){
var commentBox = el.parentNode.parentNode.parentNode;//評(píng)論的容器
var box = commentBox.parentNode.parentNode.parentNode;//該條分享的容器
var textarea = box.getElementsByTagName('textarea')[0];
var user = commentBox.getElementsByClassName('user')[0];
var txt = el.innerHTML;
if(txt == '回復(fù)'){
textarea.onfocus();
textarea.value = '回復(fù)' + user.innerHTML;
textarea.onkeyup();
}
else{
removeNode(el.parentNode.parentNode.parentNode);
}
}感謝各位的閱讀，以上就是“JavaScript怎么實(shí)現(xiàn)評(píng)論點(diǎn)贊功能”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)JavaScript怎么實(shí)現(xiàn)評(píng)論點(diǎn)贊功能這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
