JavaScript에서 카운터 기본 사항을 구현하는 방법-JS 튜토리얼-php.cn

JavaScript에서 카운터 기본 사항을 구현하는 방법

黄舟

풀어 주다： 2017-10-11 10:18:29

원래의

3539명이 탐색했습니다.

이 글에서는 주로 자바스크립트에서 카운터를 구현하는 기본적인 방법을 자세히 소개합니다. , 특정 참조 값이 있으므로 관심 있는 친구가 참조할 수 있습니다

이 문서의 예는 참조용으로 js 구현 카운터의 특정 코드를 공유하며, 구체적인 내용은 다음과 같습니다

JavaScript를 사용하여 설정된 시간 간격이 지나면 함수가 호출된 직후가 아니라 코드를 실행합니다. 타이밍 이벤트라고 부르세요.

JavaScript에서 타이밍 이벤트를 사용하는 것은 쉽습니다. 두 가지 주요 메서드는 다음과 같습니다.

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(&#39;txt&#39;).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부터 시작되고, 타이머가 중지되고 그 순간 타이머가 일시 중지됩니다. 시작을 다시 클릭하세요. 그리고 누적 카운트가 계속됩니다...근데 이 프로그램에는 작은 버그가 있습니다.계속 클릭하여 타이밍을 시작하면 타이밍 속도가 증가하고 타이밍을 중지하려면 여러 번 클릭해야 합니다. 중지에 대한 응답으로...

위 내용은 JavaScript에서 카운터 기본 사항을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!