js 간단 한 좋아요 조작 실현

3278 단어 js칭찬 하 다
JavaScript 구현 좋아요 조작:(트 레이 너·초급),참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
초기 준비:
① jQuery 파일 가 져 오기;
② boottstrap 파일 가 져 오기;
③ 좋아요 그림 누 르 기;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> span        </title>
    <script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
    <script type="text/javascript" src="js/bootstrap.min.js" ></script>
  </head>
  <body>
    <h5 style="font-family: '    ';">        ,        </h5>
    <!--<span style="font-family: '    ';color: orangered;font-size: 10px; ">  :             transform:       <br/></span>-->
     
    <span id="goodSpan" onclick="sendGood()">
      <img src="img/good.jpg" style="width: 25px; height: 25px;" /> 
    </span>
    [<span id="good"></span>]
      
    <span id="badSpan" onclick="sendBad()">
      <img src="img/good.jpg" style="width: 25px; height: 25px; transform: rotate(180deg);" /> 
    </span>
    [<span id="bad"></span>]
     
    <script>
      /*     :*/
      document.getElementById("good").innerText = "";
      var good = document.getElementById("good").textContent;
       
      document.getElementById("bad").innerText = "";
      var bad = document.getElementById("bad").textContent;
      window.onload = function(){
        if (good == "") {
          good = 0;
          document.getElementById("good").innerText = 0;
        }
        if (bad == "") {
          bad = 0;
          document.getElementById("bad").innerText = 0;
        }       
      }
       
      /*     :*/
      function sendGood(){
        good = parseInt(good) + 1;
        document.getElementById("good").innerText = good;
         
        document.getElementById("goodSpan").onclick = function(e){
          e.preventDefault();
          e.stopImmediatePropagation();
        }
      }
       
       
      /*    :*/
      function sendBad(){
        bad = parseInt(bad) + 1;
        document.getElementById("bad").innerText = bad;
        document.getElementById("badSpan").onclick = function(e){
          e.preventDefault();
          e.stopImmediatePropagation();
        }
      }
    </script>
  </body>
</html>
결 과 는 다음 과 같다.

다음은'좋아요'그림 입 니 다.그림 을 직접 드래그 하여 로 컬 에 저장 하고 사용 할 수 있 습 니 다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기