JavaScript倒數計時程式碼例項

admin發表於2018-06-29
JavaScript

關於倒數計時效果在很多場景都有應用，例如高考倒數計時或者書奧運倒數計時，下面就詳細介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>javascript倒數計時效果-螞蟻部落</title>
<style type="text/css"> 
*{ 
  margin:0; 
  padding: 0; 
} 
ul,li{
  list-style:none;
} 
#show_time{
  color:#f00;
  font-size:24px;
  font-weight:bold;
  margin:100px;
} 
</style> 
<script type="text/javascript"> 
function countdown(){ 
  var show_time=document.getElementById("show_time"); 
  var endtime=new Date("12/31/2015 23:59:59"); 
  var today=new Date(); 
  var delta_T=endtime.getTime()-today.getTime();
  if(delta_T<0){ 
    clearTimeout(auto); 
    show_time.innerHTML="倒數計時已經結束"; 
  } 
  else{
    var total_days=delta_T/(24*60*60*1000); 
    var total_show=Math.floor(total_days); 
    var total_hours=(total_days-total_show)*24;
    var hours_show=Math.floor(total_hours);
    var total_minutes=(total_hours-hours_show)*60; 
    var minutes_show=Math.floor(total_minutes);
    var total_seconds=(total_minutes-minutes_show)*60;
    var seconds_show=Math.floor(total_seconds);
    show_time.innerHTML="距離結束還有:"+total_show+"天"+hours_show+"時"+minutes_show+"分"+seconds_show+"秒"; 
    var auto=setTimeout(countdown,1000);
  }
}
window.onload=function(){
  countdown();
}
</script> 
</head> 
<body> 
<div id="show_time"></div> 
</body> 
</html>

程式碼實現了我們需要的倒數計時效果，如果已經到期那麼就會給出"倒數計時已經結束"的提示。

一.實現原理:

設定一個到期的時間，然後和現在的時間進行比對，通過setTimeout()函式遞迴呼叫countdown()函式，每秒比對一次，這樣可以實現倒數計時效果，噹噹前時間超過指定時間時，就停止setTimeout()函式的執行，並且給出提示。

二.程式碼註釋:

（1）.function countdown(){}，宣告一個函式用於進行倒數計時效果。

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

（3）.var endtime=new Date("12/31/2015 23:59:59")，設定倒數計時的到期時間。

（4）.var today=new Date()，建立一個時間物件，用於獲取當前時間。

（5）.var delta_T=endtime.getTime()-today.getTime()，獲取指定到期時間和當前時間的時間差，以秒計算。關於getTime()方法參閱JavaScript getTime()一章節。

（6）. if(delta_T<0)，如果小於零，說明已經到期。

（7）.clearTimeout(auto)，停止setTimeout()函式的執行。

（8）.show_time.innerHTML="倒數計時已經結束"，將show_time的內容設定為"倒數計時已經結束"。

（9）.var total_days=delta_T/(24*60*60*1000)，delta_T是間隔時間的總秒數，而24*60*60*1000是一天的總秒數，這樣就計算出剩餘的天數。

（10）.var total_show=Math.floor(total_days)，獲取剩餘的天數，這裡要注意的是使用了Math.floor()函式進行下舍入，因為只有這樣才可以計算剩餘的小時和下面更小的時間單位。

（11）.var total_hours=(total_days-total_show)*24，總天數減去下舍入的天數然後再乘以24（一天的小時數）就得出了剩餘的小時數。下面計算分鐘，秒數也是如此，這裡就不多介紹了。

（12）.show_time.innerHTML="距離結束還有:"+total_show+"天"+hours_show+"小時"+minutes_show+"分"+seconds_show+"秒"，將剩餘的事件寫入show_time中。

（13）.var auto=setTimeout(countdown,1000)，每隔1秒遞迴呼叫一次countdown()函式。

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

（15）.countdown()，呼叫此函式。

三.相關內容:

（1）.Math.floor()方法參閱JavaScript Math.floor()一章節。 

（2）.setTimeout()方法參閱setTimeout()一章節。

相關文章