Verwenden Sie JavaScript, um Kommentar- und Like-Funktionen zu implementieren-js-Tutorial-php.cn

Durch die Analyse der logischen Beziehung der Kommentarfunktion erfahren Sie, wie Sie mit JavaScript verschiedene Funktionen wie Kommentare, Antworten und Likes implementieren. In diesem Artikel wird hauptsächlich die Implementierung der JavaScript-Kommentar- und Like-Funktion vorgestellt. Freunde, die sie benötigen, können sich auf

beziehen. Durch die Analyse der logischen Beziehung der Kommentarfunktion können Sie lernen, wie Sie mit Javascript verschiedene Funktionen implementieren, z Kommentare, Antworten und Likes.

1. Erfahren Sie, wie Sie mit Javascript mit Datum und Uhrzeit umgehen.

2. Beherrschen Sie die Methode zum Hinzufügen/Löschen von untergeordneten Knoten in Dom-Operationen.

3. Verwenden Sie setTimeout, um den Timer einzustellen.

4. Verwenden Sie „clearTimeout“, um den Timer zu löschen und den Ereignis-Proxy zu verwenden.

Rendering:

1) Implementieren Sie die Funktion zum Löschen freigegebener Inhalte

Verwenden Sie den Ereignis-Proxy, um die freigegebenen Inhalte zu löschen, indem Sie auf klicken Schließen-Taste.

Ereignisse löschen:

Verwenden Sie die Ereignis-Proxy-Funktion, um Ereignisse auf dem übergeordneten Elementknoten hinzuzufügen, um die Codemenge und die Systemauslastung zu reduzieren.

Bei Verwendung des Ereignis-Proxys Ereignisse verwenden Das srcElement-Attribut im Objekt ruft das Triggerelement ab.

Der IE-Browser unterstützt window.event.srcElement und Firefox unterstützt window.event.target.

Um in Firefox kompatibel zu sein, müssen Sie nur einen Code ändern: var el = e.srcElement in var el = e.srcElement || ändern

removeChild(). bezieht sich auf das Löschen des untergeordneten Elements. Um also das aktuelle Element el zu löschen, verwenden Sie zuerst parentNode, um den übergeordneten Knoten zu finden, und verwenden Sie dann removeChild (el), um das el-Element zu löschen.

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;
          }
        }
      }

Nach dem Login kopieren

2) Implementieren Sie die Like-Funktion des Teilens

Erstellen Sie eine Like- und Share-Funktion, die zwei Parameter erfordert. Der erste Parameter (Feld) stellt den äußersten übergeordneten Container der Like-Ebene dar Der zweite Parameter (el) bezieht sich auf das ausgelöste Element, dh auf die Schaltfläche „Gefällt mir“

getAttribute(), um die Attribute abzurufen, und setAttribute() verwenden, um die Attribute des Elements festzulegen.

js-Code:

//点赞分享
      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);
          }
        }
      }

Nach dem Login kopieren

3) So implementieren Sie die Kommentarfunktion

Zunächst müssen Sie die Änderung des Kommentareingabefelds implementieren, indem Sie sich drei anhören Ereignisse

1 .Wenn Sie den Fokus gewinnen: onfocus

2. Den Fokus verlieren: onblur

3. Wenn die Mauseingabe erscheint: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;;
          }
        }

Nach dem Login kopieren

4) Implementieren Sie die Antwortschaltfläche und die Wortzählfunktionen

Fügen Sie das Onkeyup-Tastatur-Popup-Ereignis hinzu den Textbereich und lernen Sie, ihn zu verwenden, um die Methode für den übergeordneten Knoten und den untergeordneten Knoten zu erhalten.

Für ein besseres Benutzererlebnis wird das Eingabefeld nicht sofort kleiner, wenn es den Fokus verliert. Daher wurde Onblur eine Timer-Funktion hinzugefügt. Beachten Sie, dass der Timer gelöscht werden muss, wenn auf die graue Antwortschaltfläche geklickt wird

js-Code:

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;;
        }

Nach dem Login kopieren

5) Implementieren Sie die Funktion zum Teilen von Kommentaren

Wenn Sie auf die Schaltfläche „Antworten“ klicken, wird der Inhalt des Eingabefelds durch Erstellen zur Antwortliste hinzugefügt a p und Hinzufügen einer Antwortliste, achten Sie auf den geänderten Teil der neuen Antwortliste und das Datum des zu ändernden Kommentars.

js-Code:

//发表评论
      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 src="images/my.jpg" class="myhead" 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" style="">赞</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;
        }
      }

Nach dem Login kopieren

5) Implementieren Sie die Like-Antwortfunktion

Im a-Tag der Like-Schaltfläche befindet sich ein my-Attribut, das angibt, ob Ihnen „Gefällt mir“ gefallen hat Wenn mein Wert 0 ist, erhöht sich die Gesamtsumme um eins, wenn auf die Schaltfläche „Gefällt mir“ geklickt wird.

js-Code:

//点赞回复
      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;;
      }

Nach dem Login kopieren

6) Implementieren Sie die Lösch- und Antwortfunktion des Inhalts in der Antwortliste

Antworten Sie auf die Kommentare anderer Personen und löschen Sie Ihre eigenen Kommentare

js-Code:

 //操作回复
      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);
        }
      }

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonVerwenden Sie JavaScript, um Kommentar- und Like-Funktionen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!