JavaScriptを使用してコメント機能やいいね機能を実装する

コメント機能の論理関係を分析することで、JavaScriptを使用してコメント、返信、いいねなどのさまざまな機能を実装する方法を学びます。この記事では主にJavaScriptのコメント機能といいね機能の実装方法を紹介しますので、必要な方は参考にしてください

コメント機能の論理関係を分析することで、コメント、返信、いいねなどのさまざまな機能をJavaScriptで実装する方法を学びます。 、など

1. Javascript で日付と時刻を処理する方法を学びます。

2. Dom操作における子ノードの追加・削除方法をマスターする。

3. setTimeout を使用してタイマーを設定します。

4. clearTimeout を使用してタイマーをクリアし、イベント プロキシを使用します。

レンダリング:

1) 共有コンテンツを削除する機能を実装します

イベントプロキシを使用して、閉じるボタンをクリックして共有コンテンツを削除します。

イベントの削除:

イベントプロキシ関数を使用して親要素ノードにイベントを追加し、コードの量とシステムの実行負荷を削減します。

イベントをプロキシする場合、イベントオブジェクトの srcElement 属性を使用してトリガー要素を取得します。

IE ブラウザは window.event.srcElement をサポートし、Firefox は window.event.target をサポートします。

したがって、Firefox と互換性を持たせるには、コードを 1 つ変更するだけです: var el = e.srcElement を var el = e.srcElement || e.target

removeChild() は子要素を削除することを意味します。現在の el 要素を削除するには、まずparentNodeを使用して親ノードを検索し、次にremoveChild(el)を使用してel要素を削除する必要があります。

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

2) 共有の like 関数を実装します

2 つのパラメータを必要とする like および share 関数を構築します。最初のパラメータ (box) は like の最も外側の親コンテナを表し、2 番目のパラメータ (el ) はそのコンテナを参照します。トリガーされた要素、つまりいいねボタン

getAttribute() は属性を取得し、setAttribute() を使用して要素の属性を設定します。

jsコード:

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

3) コメント機能を実装するには

まず、3つのイベントをリッスンしてコメント入力ボックスの変更を実装します

1. フォーカスを取得するとき: onfocus

2. :

onblur

3. マウス入力がポップアップするとき:

onkeyup

//输入框
        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) 返信ボタンと単語カウント機能を実装します

onkeyup キーボード ポップアップ イベントをテキストエリアに追加し、メソッドの使用方法を学びます親ノードと子ノードの取得。

より良いユーザーエクスペリエンスを実現するために、入力ボックスはフォーカスを失ってもすぐには小さくならないので、灰色の返信ボタンがクリックされたときにタイマーをクリアする必要があることに注意してください

js code:

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 ) コメント共有機能を実装します

返信ボタンをクリックすると、pを作成して新しい返信リストを追加することで、入力ボックスの内容を返信リストに追加します。新しい返信の内容の一部が変更されることに注意してください。リストと日付を変更したいコメントを入力します。

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 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の場合合計が加算されます。あなたがいいねボタンをクリックすると 1 になります。私の値が 1 の場合、いいねボタンをクリックすると合計が 1 減ります。

jsコード:

//点赞回复
      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) 返信リストのコンテンツの削除と返信機能を実装

他の人のコメントに返信したり、自分のコメントを削除したり

jsコード:

 //操作回复
      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 == '回复'){
          textarea.onfocus();
          textarea.value = '回复' + user.innerHTML;
          textarea.onkeyup();
        }
        else{
          removeNode(el.parentNode.parentNode.parentNode);
        }
      }

以上がJavaScriptを使用してコメント機能やいいね機能を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。