자 바스 크 립 트 계수기 기초 방법 실현

1828 단어 js카운터
본 논문 의 사례 는 js 실현 카운터 의 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
함수 가 호출 된 후 바로 실행 되 는 것 이 아니 라 자 바스 크 립 트 를 사용 하여 시간 간격 을 설정 한 후에 코드 를 실행 합 니 다.타임 이벤트 라 고 합 니 다.
자바 Scritp 에서 시간 계산 이 벤트 를 사용 하 는 것 은 매우 쉽다.두 가지 관건 적 인 방법 은:
setInterval()-지정 한 밀리초 간격 으로 지정 한 코드 를 끊임없이 실행 합 니 다.
setTimeout()-지정 한 밀리초 수 를 일시 정지 한 후 지정 한 코드 를 실행 합 니 다.
참고:setInterval()과 setTimeout()은 HTML DOM Window 대상 의 두 가지 방법 입 니 다.여기 서 setTimeout()방법 만 소개 합 니 다.

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      var c = 0
      var t

      function timedCount() {
        document.getElementById('txt').value = c;
        c = c + 1;
        //     ,          
        t = setTimeout("timedCount()", 1000);
      }

      function stopCount() {
        //     
        clearTimeout(t);
      }
    </script>
  </head>

  <body>

    <form>
      <input type="button" value="    !" onClick="timedCount()">
      <input type="text" id="txt">
      <input type="button" value="    !" onClick="stopCount()">
    </form>



  </body>

</html>
효과:

시작 을 누 르 면 0 부터 계산 하고 시간 을 멈 추 면 그 시간 에 멈 추고 시작 을 누 르 면 계속 누적 계산 합 니 다.하지만 이 프로그램 은 작은 bug 가 있 습 니 다.끊 임 없 는 클릭 으로 시간 을 계산 하면 시간 을 재 는 속도 가 증가 합 니 다.그리고 한 번 의 정지 시간 을 누 르 면 멈 추 지 않 습 니 다.응답 할 클릭 을 여러 번 해 야 멈 출 수 있 습 니 다.

좋은 웹페이지 즐겨찾기