setTimeout()實現的計數器功能程式碼例項

antzone發表於2017-04-07

本章節分享一段程式碼例項，它使用setTimeout()方法實現了計數器功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
var count = 0;
var timer;
var timerOn = false;
var dom=null;
function timedCount() {
  count++;
  dom.innerHTML=count;
  timer = setTimeout(function(){
    timedCount()
   }, 1000);
}
function doTimer() {
  if (!timerOn) {
    timerOn = true;
    timedCount();
  }
}
function stopCount() {
  clearTimeout(timer);
  timerOn = false;
}
window.onload=function(){
  dom=document.getElementById("antzone");
  var beginBt=document.getElementById("beginBt");
  var stopBt=document.getElementById("stopBt");
   
  beginBt.onclick=function(){doTimer()}
  stopBt.onclick=function(){stopCount()}
}
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="beginBt" value="開始計數"/>
<input type="button" id="stopBt" value="停止計數"/>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var count = 0,宣告一個變數用來儲存計數。

（2）.var timer,用來作為定時器函式的標識。

（3）.var timerOn = false，宣告一個變數並賦初值為false，用來作為計數器是否開啟的標識。

（4）.var dom=null,此變數用來儲存dom元素物件。

（5）.function timedCount() {

  count++;

  dom.innerHTML=count;

  timer = setTimeout(function(){

    timedCount()

   }, 1000);

}，實現了計數功能，這裡採用了遞迴。

（6）.function doTimer() {

  if (!timerOn) {

    timerOn = true;

    timedCount();

  }

}，此函式可以實現開啟計數的功能。

首先判斷當前是否是開啟的，如果不是開啟。

就設定timerOn為開啟狀態。

然後執行計數功能timedCount()。

（7）.function stopCount() {

  clearTimeout(timer);

  timerOn = false;

}，能夠停止計數功能，也就是停止遞迴迴圈。

二.相關閱讀:

（1）.setTimeout()方法可以參閱setTimeout()一章節。

（2）.innerHTML可以參閱js innerHTML一章節。

相關文章