首頁 > 文章 > web前端 > JavaScript中實作計數器基礎的方法

JavaScript中實作計數器基礎的方法

黄舟原創: 2017-10-11 10:18:293427瀏覽

這篇文章主要為大家詳細介紹了JavaScript實作計數器的基礎方法，具有一定的參考價值，有興趣的小夥伴們可以參考一下

本文實例為大家分享了js實作計數器的具體程式碼，供大家參考，具體內容如下

#透過使用JavaScript，設定的時間間隔之後會執行程式碼，而不是在函數被呼叫後立即執行。稱為計時事件。

在JavaScritp 中使用計時事件是很容易的，兩個關鍵方法是:

setInterval() - 間隔指定的毫秒數不停地執行指定的代碼。
setTimeout() - 暫停指定的毫秒數後執行指定的程式碼

Note: 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開始計數，停止計時則會暫停在那個時刻，再點擊開始則會繼續累加計數...但是這個程式有一個小bug，當不停的點擊開始計時，計時的速度會增加，而且點擊一次停止計時不會停止，要回應的點擊很多次才可以停止.....

以上是JavaScript中實作計數器基礎的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript中for迴圈以及if判斷語句詳解下一篇：JavaScript中for迴圈以及if判斷語句詳解

看更多