JavaScript年月日精確到秒倒數計時

admin發表於2018-11-22

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

程式碼例項如下:

[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("2019/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() 方法一章節。  

相關文章