JavaScript 年月日倒數計時

admin發表於2019-12-10
JavaScript

分享一段程式碼例項，它實現了年月日倒數計時效果，能夠精確到秒。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<script type="text/javascript">  
window.onload=function(){
  var timer=null;
  var show=document.getElementById("show");
  function show_date_time(){   
    var target=new Date("2029/4/16");  
    var today=new Date(); 
    var timeold=(target.getTime()-today.getTime());   
    var sectimeold=timeold/1000   
    var secondsold=Math.floor(sectimeold);   
    var msPerDay=24*60*60*1000   
    var e_daysold=timeold/msPerDay   
    var daysold=Math.floor(e_daysold);   
    var e_hrsold=(e_daysold-daysold)*24;   
    var hrsold=Math.floor(e_hrsold);   
    var e_minsold=(e_hrsold-hrsold)*60;   
    var minsold=Math.floor((e_hrsold-hrsold)*60);   
    var seconds=Math.floor((e_minsold-minsold)*60);
    if(daysold<0){   
      document.getElementById("time").innerHTML="逾期,倒數計時已經失效";  
      clearInterval(timer);
    }   
    else{   
      if (daysold<10) {daysold="0"+daysold}   
      if (hrsold<10) {hrsold="0"+hrsold}   
      if (minsold<10) {minsold="0"+minsold}   
      if (seconds<10) {seconds="0"+seconds}     
      show.innerHTML="距離結束時間還有:"+daysold+"天"+hrsold+"小時"+minsold+"分"+seconds+"秒";     
    }   
  }   
  timer=setInterval(show_date_time,1000);
}  
</script>
</head> 
<body> 
<div id="show"></div>
</body> 
</html>

以上程式碼實現了基本的倒數計時效果，下面介紹一下它的實現過程。

一.程式碼註釋:

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

（2）.var timer=null，宣告一個變數並賦初值為null，作為定時器函式的標識返回值。

（3）.var show=document.getElementById("show")，獲取元素物件。

（4）.function show_date_time(){}，此函式是實現倒數計時的核心。

（5）.var target=new Date("2016/4/16")，規定目標時間點。

（6）.var today=new Date()，獲取當前時間物件。

（7）.var timeold=(target.getTime()-today.getTime())，獲取這上面兩者的時間戳之差。

（8）.var sectimeold=timeold/1000，將時間戳之差換算成秒。

（9）.var secondsold=Math.floor(sectimeold)，進行下舍入，獲取秒，其實這個完全沒必要，時間戳除以1000必定是整數。

（10）.var msPerDay=24*60*60*1000，獲取每天24小時有多少秒。

（11）.var e_daysold=timeold/msPerDay，獲取相差的天數。

（12）.var daysold=Math.floor(e_daysold)，因為相差的天數不一定是整數，比如2.5天類，所以要進行下舍入，獲取整數天。

（13）.var e_hrsold=(e_daysold-daysold)*24，獲取相差的小時數。

（14）.var hrsold=Math.floor(e_hrsold)，和上面同樣的道理，也需要下舍入，以此類推。

（15）.if(daysold<0)，如果到期，則給出響應提示，並結束定時器函式的執行。

（16）.else{   

      if (daysold<10) {daysold="0"+daysold}   

      if (hrsold<10) {hrsold="0"+hrsold}   

      if (minsold<10) {minsold="0"+minsold}   

      if (seconds<10) {seconds="0"+seconds}     

      show.innerHTML="距離結束時間還有:"+daysold+"天"+hrsold+"小時"+minsold+"分"+seconds+"秒";     

  }   

上面的操作是將時間輸出判斷是否小於0的目的是將8這種類似形式轉換為08。

（17）.timer=setInterval(show_date_time,1000)，使用定時器函式，每秒執行一次show_date_time函式。

二.相關閱讀:

（1）.Date建構函式參閱JavaScript Date物件一章節。

（2）.Math.floor()參閱JavaScript Math.floor()一章節。

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

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

（5）.setInterval()參閱setInterval() 方法一章節。  

相關文章