JavaScript 倒數計時60秒程式碼

antzone發表於2019-12-10

通過程式碼例項分享一個倒數計時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一章節。

相關文章