JavaScript倒數計時60秒程式碼詳解

antzone發表於2017-11-20
JavaScript

通過程式碼例項分享一個倒數計時60秒的效果。

程式碼是非常簡單的，但是很多初學者還是需要的，下面就做一下演示。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
#ant {
  width:150px;
  height:50px;
  color:red;
  text-align:center;
  line-height:50px;
  margin:0px auto;
}
</style>
<script>
window.onload = function () {
  var odiv = document.getElementById("ant");
  var count = 60;
    odiv.innerHTML=count;
  var timer = null;
  timer = setInterval(function () {
    if (count > 0) {
      count = count - 1;
      odiv.innerHTML = count;
    }
    else {
      clearInterval(timer);
    }
  }, 1000);
}
</script>
</head> 
<body> 
<div id="ant"></div>
</body> 
</html>

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

一.程式碼註釋:

（1）.window.onload = function () {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var odiv = document.getElementById("ant")，獲取id屬性值為"ant"的元素物件。

（3）.var count = 60，設定從哪個數字開始倒計操作。

（4）.odiv.innerHTML= count，將div數字初始化為count，否則倒數計時最初數字count無法顯示，因為setInterval()是每隔指定時間去執行回撥函式，第一次時間間隔導致了這個現象。

（4）.var timer = null，宣告變數並賦初值為null，用來存放定時器函式的標識。

（5）.timer = setInterval(function () {

  if (count > 0) {

    count = count - 1;

    odiv.innerHTML = count;

  }

  else {

    clearInterval(timer);

  }

}, 1000)

使用定時器函式每隔1000毫秒（一秒）執行一次回撥函式。

此回撥函式每執行一次都會將count減1，並將當前count寫入div，直至變為0。

二.相關閱讀:

（1）.setInterval()參閱window.setInterval()一章節。

（2）.clearInterval()參閱clearInterval()一章節。

（3）.innerHTML參閱innerHTML一章節。

相關文章