通過分析評論功能的邏輯關(guān)系，學(xué)習(xí)如何使用評論、回復(fù)、點贊等各種功能

1.學(xué)習(xí)處理日期和時間。

2. 掌握Dom操作中添加/刪除子節(jié)點的方法。

3.用于設(shè)置定時器。

4. 使用清除計時器和事件代理。

效果圖：

1）實現(xiàn)刪除共享內(nèi)容的功能

使用事件代理通過單擊關(guān)閉按鈕刪除共享內(nèi)容。

刪除事件：

使用事件代理功能，向父元素節(jié)點添加事件，減少代碼量和系統(tǒng)負載。

事件代理時，使用事件對象中的屬性獲取觸發(fā)元素。

IE 瀏覽器支持...，但支持...

所以，如果你想在其中兼容，你只需要改變一個代碼： var el = e。到 var el = e。 || e.

() 表示刪除子元素，所以要刪除當(dāng)前元素el，先用查找父節(jié)點，再用(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


2)實現(xiàn)點贊分享功能
要構(gòu)造一個分享點贊的函數(shù)，需要兩個參數(shù)。第一個參數(shù)（box）代表點贊的最外層父容器，第二個參數(shù)（el）指的是被觸發(fā)的元素，即點贊的那個。按鈕
()獲取屬性，使用()設(shè)置元素的屬性。
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

3)實現(xiàn)評論功能
首先要通過監(jiān)聽三個事件來實現(xiàn)評論輸入框的變化

1.獲得焦點時：
2.失去焦點：
3.當(dāng)鼠標(biāo)輸入彈出時：
//輸入框
        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)回復(fù)按鈕和字?jǐn)?shù)統(tǒng)計功能
添加 up事件php點贊功能實現(xiàn)，學(xué)習(xí)使用獲取父子節(jié)點的方法。
為了更好的用戶體驗，輸入框在失去焦點時不會立即變小，所以添加了定時器功能。請注意php點贊功能實現(xiàn)，點擊灰色回復(fù)按鈕時應(yīng)清除計時器。

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)評論分享功能
點擊回復(fù)按鈕時，通過創(chuàng)建div并添加回復(fù)列表，將輸入框的內(nèi)容添加到回復(fù)列表中。注意修改部分新回復(fù)列表和評論日期。
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 = ' '+
            '
'+
            '
我：'+textarea.value+'
'+
            '
'+
            getTime()+
            '贊'+
            '刪除'+
            '
'+
            '
';
        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)點贊回復(fù)功能

贊按鈕的a標(biāo)簽中有一個my屬性，表示你是否喜歡過。當(dāng) my 的值為 0 時，單擊喜歡按鈕時它會增加 1。當(dāng) my 的值為 1 時，單擊喜歡按鈕時它會減少 1。 .
js 代碼：
//點贊回復(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）實現(xiàn)回復(fù)列表中內(nèi)容的刪除回復(fù)功能
回復(fù)他人的評論并刪除自己的評論
js 代碼：
 //操作回復(fù)
      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 == '回復(fù)'){
          textarea.onfocus();
          textarea.value = '回復(fù)' + user.innerHTML;
          textarea.onkeyup();
        }
        else{
          removeNode(el.parentNode.parentNode.parentNode);
        }
      }

以上是小編介紹的評論點贊功能的實現(xiàn)方法。我希望它會對你有所幫助。如果您有任何問題，請給我留言。小編會及時回復(fù)您。非常感謝您對  網(wǎng)站的支持！
您可能感興趣的文章：