使用JavaScript實現評論點讚功能-js教程-PHP中文網

首頁

web前端

js教程

使用JavaScript實現評論點讚功能

黄舟

Mar 20, 2017 pm 03:03 PM

透過分析評論功能的邏輯關係，學習如何使用JavaScript實現評論、回應、按讚等各種功能。這篇文章主要介紹了JavaScript評論點讚功能的實現方法,需要的朋友可以參考下

透過分析評論功能的邏輯關係，學會如何使用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(&#39;list&#39;);
      var boxs = document.getElementsByClassName(&#39;box&#39;);
      //删除节点函数
      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 &#39;close&#39;:removeNode(el.parentNode);break;
          }
        }
      }

2)實作分享的讚功能

建構一個按讚分享的函數，需要兩個參數，第一個參數（box）表示所按讚的最外層父容器，第二個參數（el）指觸發的元素，即讚的那個按鈕

getAttribute()獲得屬性，使用setAttribute()來設定元素的屬性。

js程式碼：

//点赞分享
      function praiseBox(box,el){//box为所触发元素el的最外层父容器
        var praiseElement = box.getElementsByClassName(&#39;praise-total&#39;)[0];
        var oldTotal = parseInt(praiseElement.getAttribute(&#39;total&#39;));
        var txt = el.innerHTML;
        var newTotal = 0;
        if(txt == &#39;赞&#39;){
          newTotal = oldTotal + 1;
          praiseElement.innerHTML = (newTotal == 1) ? &#39;我觉得很赞&#39; : &#39;我和&#39; + oldTotal +&#39;个人觉得很赞&#39;;
          el.innerHTML = &#39;取消赞&#39;;
        }else{
          newTotal = oldTotal - 1;
          praiseElement.innerHTML = (newTotal == 0) ? &#39;&#39; : newTotal + &#39;个人觉得很赞&#39;;
          el.innerHTML = &#39;赞&#39;;
        }
        praiseElement.setAttribute(&#39;total&#39;,newTotal);
        praiseElement.style.display = (newTotal == 0) ? &#39;none&#39;: &#39;block&#39;;
      }
      //事件代理
      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 &#39;close&#39;:removeNode(el.parentNode);break;
            case &#39;praise&#39;:praiseBox(el.parentNode.parentNode.parentNode,el);
          }
        }
      }

3)實作註解功能

首先要實作註解輸入框的改變，透過監聽三個事件

1.獲得焦點時：onfocus

2.失去焦點：onblur

3.滑鼠輸入彈起來的時候：onkeyup

//输入框
        var textarea = boxs[i].getElementsByTagName(&#39;textarea&#39;)[0];
        textarea.onfocus = function(){
          this.parentNode.className = &#39;text-box text-box-on&#39;;
          this.value = (this.value == &#39;评论...&#39;) ? &#39;&#39;:this.value;
        }
        textarea.onblur = function(){
          if(this.value == &#39;&#39;){
            this.parentNode.className = &#39;text-box&#39;;
            this.value = &#39;评论...&#39;;
          }
        }

4）實作回復按鈕和字數統計功能

對textarea加入onkeyup鍵盤彈起事件，學習利用取得父節點和孩子節點的方法。

為了更好的使用者體驗，讓輸入框失去焦點時不是立即變小，所以在onblur中增加一個計時器功能，注意當點擊灰色回應按鈕時要清除計時器

js代碼:

textarea.onblur = function(){
          var me = this;//因为有定时器所以先将this存放于变量中
          timer = setTimeout(function(){
            if(me.value == &#39;&#39;){
              me.parentNode.className = &#39;text-box&#39;;
              me.value = &#39;评论...&#39;;
            }
          },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 = &#39;btn btn-off&#39;;
          }else{
            btn.className = &#39;btn&#39;;
          }
          word.innerHTML = len + &#39;/140&#39;;
        }

5）實現評論分享功能

當點擊回复按鈕時，將輸入框的內容添加到回复列表中，是通過創建一個p，添加一個回复列表，注意改變新增回應列表的部分內容以及要變更評論的日期。

js程式碼：

//发表评论
      function replayBox(box){
        var textarea = box.getElementsByTagName(&#39;textarea&#39;)[0];
        var list = box.getElementsByClassName(&#39;comment-list&#39;)[0];
        var p = document.createElement(&#39;p&#39;);
        p.className = &#39;comment-box clearfix&#39;;
        p.setAttribute(&#39;user&#39;,&#39;self&#39;);
        var html = &#39; <img class="myhead lazy"  src="/static/imghwm/default1.png"  data-src="images/my.jpg"    alt="" />&#39;+
            &#39;<p class="comment-content">&#39;+
            &#39;<p class="comment-text"><span class="user">我：</span>&#39;+textarea.value+&#39;</p>&#39;+
            &#39;<p class="comment-time">&#39;+
            getTime()+
            &#39;<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="comment-praise" total="0" my="0" >赞</a>&#39;+
            &#39;<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="comment-operate">删除</a>&#39;+
            &#39;</p>&#39;+
            &#39;</p>&#39;;
        p.innerHTML = html;
        list.appendChild(p);
        textarea.value = &#39;&#39;;
        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: &#39;0&#39; + m;
          d = d>10 ? d: &#39;0&#39; + d;
          h = h>10 ? h: &#39;0&#39; + h;
          mi = mi>10 ?mi: &#39;0&#39; +mi;
          return y + &#39;-&#39; + m + &#39;-&#39; + d + &#39; &#39; + h + &#39;:&#39; + mi;
        }
      }

5）實作讚回覆功能

按讚按鈕的a標籤中有個my屬性，表示自己是否已按讚，當my值為0時，點擊讚按鈕時total會加一，當my值為1時，點擊讚按鈕時total減1。

js程式碼：

//点赞回复
      function praiseReplay(el){
        var oldTotal = parseInt(el.getAttribute(&#39;total&#39;));
        var my = parseInt(el.getAttribute(&#39;my&#39;));
        var newTotal = 0;
        if(my == 0){
          newTotal = oldTotal + 1;
          el.setAttribute(&#39;total&#39;,newTotal);
          el.setAttribute(&#39;my&#39;,1);
          el.innerHTML = newTotal + &#39;取消赞&#39;;
        }else{
          newTotal = oldTotal - 1;
          el.setAttribute(&#39;total&#39;,newTotal);
          el.setAttribute(&#39;my&#39;,0);
          el.innerHTML = (newTotal == 0) ? &#39;&#39; : newTotal + &#39;赞&#39;;
        }
        el.style.display = (newTotal == 0) ? &#39;&#39; : &#39;inline-block&#39;;
      }

6）實現回覆清單中內容的刪除和回覆功能

實現回覆他人的評論並刪除自己的評論

js程式碼：

 //操作回复
      function operateReply(el){
        var commentBox = el.parentNode.parentNode.parentNode;//评论的容器
        var box = commentBox.parentNode.parentNode.parentNode;//该条分享的容器
        var textarea = box.getElementsByTagName(&#39;textarea&#39;)[0];
        var user = commentBox.getElementsByClassName(&#39;user&#39;)[0];
        var txt = el.innerHTML;
        if(txt == &#39;回复&#39;){
          textarea.onfocus();
          textarea.value = &#39;回复&#39; + user.innerHTML;
          textarea.onkeyup();
        }
        else{
          removeNode(el.parentNode.parentNode.parentNode);
        }
      }

以上是使用JavaScript實現評論點讚功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn