Utilisez JavaScript pour implémenter les fonctions de commentaires et de likes

En analysant la relation logique de la fonction de commentaire, apprenez à utiliser JavaScript pour implémenter diverses fonctions telles que les commentaires, les réponses et les likes. Cet article présente principalement comment implémenter la fonction de commentaire et de like JavaScript. Les amis qui en ont besoin peuvent se référer à

En analysant la relation logique de la fonction de commentaire, vous pouvez apprendre à utiliser Javascript pour implémenter diverses fonctions telles que commentaires, réponses et likes

1. Apprenez à gérer la date et l'heure avec Javascript.

2. Maîtrisez la méthode d'ajout/suppression de nœuds enfants dans les opérations Dom.

3. Utilisez setTimeout pour régler la minuterie.

4. Utilisez clearTimeout pour effacer la minuterie et utiliser le proxy d'événement.

Rendu :

1) Implémenter la fonction de suppression du contenu partagé

Utilisez le proxy d'événement pour supprimer le contenu partagé en cliquant sur le bouton fermer.

Supprimer des événements :

Utilisez la fonction de proxy d'événement pour ajouter des événements sur le nœud de l'élément parent afin de réduire la quantité de code et la charge d'exécution du système.

Lors de l'utilisation du proxy d'événement, utiliser des événements L'attribut srcElement dans l'objet obtient l'élément déclencheur.

Le navigateur IE prend en charge window.event.srcElement et Firefox prend en charge window.event.target.

Donc, pour être compatible avec Firefox, il vous suffit de changer un seul code : changer var el = e.srcElement en var el = e.srcElement || fait référence à Supprimer l'élément enfant, donc pour supprimer l'élément actuel el, utilisez d'abord parentNode pour trouver le nœud parent, puis utilisez removeChild(el) pour supprimer l'élément el.

2) Implémentez la fonction like de partage

var list = document.getElementById('list');
      var boxs = document.getElementsByClassName('box');
      //删除节点函数
      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;
          }
        }
      }

Construisez une fonction like et share, qui nécessite deux paramètres. Le premier paramètre (boîte) représente le conteneur parent Like Layer le plus externe, le. le deuxième paramètre (el) fait référence à l'élément déclenché, c'est-à-dire le bouton J'aime

getAttribute() pour obtenir les attributs, et utilisez setAttribute() pour définir les attributs de l'élément.

Code js :

3) Pour implémenter la fonction de commentaire

//点赞分享
      function praiseBox(box,el){//box为所触发元素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 &#39;close&#39;:removeNode(el.parentNode);break;
            case &#39;praise&#39;:praiseBox(el.parentNode.parentNode.parentNode,el);
          }
        }
      }

Tout d'abord, vous devez implémenter le changement de la zone de saisie des commentaires en écoutant trois événements

1 .Quand on se concentre :

onfocus

2. 3. Lorsque la saisie de la souris apparaît :

onkeyup

4) Implémentez le bouton de réponse et les fonctions de comptage de mots

Ajoutez l'événement contextuel du clavier onkeyup à la zone de texte et apprenez à l'utiliser pour obtenir la méthode du nœud parent et du nœud enfant. Pour une meilleure expérience utilisateur, la zone de saisie ne devient pas immédiatement plus petite lorsqu'elle perd le focus, donc une fonction de minuterie est ajoutée à onblur. Notez que la minuterie doit être effacée lorsque vous cliquez sur le bouton de réponse gris

code js :

//输入框
        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 = '评论...';
          }
        }

5) Implémenter la fonction de partage de commentaires

Lorsque le bouton de réponse est cliqué, le contenu de la zone de saisie est ajouté à la liste de réponses en créant a p et en ajoutant une liste de réponses, faites attention à modifier une partie de la nouvelle liste de réponses et la date du commentaire à modifier.

Code 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) Implémenter la fonction de réponse J'aime

Il y a un attribut my dans la balise a du bouton J'aime, indiquant si vous avez aimé Lorsque ma valeur est de 0, le total augmentera de un lorsque vous cliquerez sur le bouton J'aime. Lorsque ma valeur est de 1, le total diminuera de un lorsque vous cliquerez sur le bouton J'aime.

Code js :

//发表评论
      function replayBox(box){
        var textarea = box.getElementsByTagName('textarea')[0];
        var list = box.getElementsByClassName('comment-list')[0];
        var p = document.createElement('p');
        p.className = 'comment-box clearfix';
        p.setAttribute('user','self');
        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;
        }
      }

6) Implémenter les fonctions de suppression et de réponse du contenu dans la liste de réponses

Répondez aux commentaires des autres et supprimez vos propres commentaires

code js :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!