JavaScript를 사용하여 함수와 같은 주석 구현-JS 튜토리얼-php.cn

댓글 기능의 논리적 관계를 분석하여 자바스크립트를 활용하여 댓글, 답글, 좋아요 등 다양한 기능을 구현하는 방법을 알아봅니다. 이번 글에서는 주로 자바스크립트 댓글과 좋아요 기능 구현 방법을 소개합니다. 필요한 친구들은

을 참고하면 됩니다. 댓글 기능의 논리적 관계를 분석하면 자바스크립트를 활용해 다양한 기능을 구현하는 방법을 익힐 수 있습니다. 댓글, 답글, 좋아요

1. 날짜와 시간을 다루는 자바스크립트를 배워보세요.

2. Dom 작업에서 하위 노드를 추가/삭제하는 방법을 숙지하세요.

3. 타이머를 설정하려면 setTimeout을 사용하세요.

4. 타이머를 지우고 이벤트 프록시를 사용하려면 cleanTimeout을 사용하세요.

렌더링:

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) 공유의 좋아요 기능 구현

두 개의 매개변수가 필요한 좋아요 및 공유 기능을 구성합니다. 첫 번째 매개변수(상자)는 좋아요의 가장 바깥쪽 부모인 컨테이너를 나타냅니다. 두 번째 매개변수(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) 답장 버튼 및 단어 개수 기능 구현

onkeyup 키보드 팝업 이벤트를 텍스트 영역에 추가하고 학습합니다. 부모 노드와 자식 노드를 얻는 방법.

더 나은 사용자 경험을 위해 입력 상자가 초점을 잃더라도 즉시 작아지지 않으므로 onblur에 타이머 기능이 추가됩니다. 회색 응답 버튼을 클릭하면 타이머가 지워져야 합니다.

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

로그인 후 복사

5) 댓글 공유 기능 구현

답글 버튼을 클릭하면 p와 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 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;
        }
      }

로그인 후 복사

5) 좋아요 답글 기능 구현

좋아요 버튼의 a 태그에는 좋아요 여부를 나타내는 my 속성이 있습니다. my 값이 0일 때 좋아요 버튼을 클릭하면 합계가 1씩 증가합니다. my 값이 1일 때 좋아요 버튼을 클릭하면 합계가 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!