原生js實現的天小時分鐘和秒倒數計時效果

antzone發表於2017-03-26
JS

倒數計時效果在很多網站中都有應用，用途也比較廣泛，比如體育賽事倒數計時，或者一些考試或者婚禮假期等等，這裡就不訊息說，下面就直接給出實現此功能的程式碼例項，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
  list-style:none;
}
body{
  font-size:18px;
  text-align:center;
}
.time{
  height:30px;
  padding:200px;
}
</style>
<script type="text/javascript">
function GetRTime(){
  var EndTime= new Date('2014/12/20 00:00:00');
  var NowTime = new Date();
  var t =EndTime.getTime() - NowTime.getTime();
  var d=0;
  var h=0;
  var m=0;
  var s=0;
  if(t>=0){
    d=Math.floor(t/1000/60/60/24);
    h=Math.floor(t/1000/60/60%24);
    m=Math.floor(t/1000/60%60);
    s=Math.floor(t/1000%60);
  }
  else{
    clearTimeout(timer);
    return;
  }
  document.getElementById("t_d").innerHTML = d + "天";
  document.getElementById("t_h").innerHTML = h + "時";
  document.getElementById("t_m").innerHTML = m + "分";
  document.getElementById("t_s").innerHTML = s + "秒";
  var timer=setTimeout(GetRTime,1000);
}
window.onload=function(){
  GetRTime()
}
</script>
</head>
<body>
<div class="time"> 
  <span id="t_d">00天</span> 
  <span id="t_h">00時</span> 
  <span id="t_m">00分</span> 
  <span id="t_s">00秒</span> 
</div>
</body>
</html>

上面的實現的倒數計時效果，下面介紹一下它的實現過程。

一.程式碼註釋:

1.function GetRTime(){}，此函式實現了倒數計時效果。

2.var EndTime= new Date('2014/12/20 00:00:00')，倒數計時終點時間物件。

3.var NowTime = new Date()，獲取當前的時間物件。

4.var t =EndTime.getTime() - NowTime.getTime()，獲取終點時間和當前時間的毫秒差距。

5.var d=0，宣告一個變數並初始化為0，用來標識倒數計時剩餘的天，下面幾個變數也是同樣的道理。

6.if(t>=0)，判斷毫秒差是否大於等於0，如果是，則繼續倒數計時效果。

7.d=Math.floor(t/1000/60/60/24)，獲取剩餘的天數。

8.h=Math.floor(t/1000/60/60%24)，獲取剩餘的小時，當然這裡所說的剩餘的小時並不是總的剩餘的小時數，而是在分鐘這個時間單位上的小時整數，下面的分鐘秒等也是同樣的道理。

9.else{clearTimeout(timer);return;}，如果倒數計時結束，那麼就結束定時器函式的執行，並跳出此函式。

10.document.getElementById("t_d").innerHTML = d + "天"，顯示倒數計時相關的內容，下面也是同樣的道理。

11.var timer=setTimeout(GetRTime,1000)，利用回撥的方式不斷呼叫GetRTime函式本身。

二.相關閱讀:

1.getTime()函式可以參閱javascript getTime()一章節。

2.Math.floor()函式可以參閱javascript Math.floor()一章節。

3.setTimeout()函式可以參閱setTimeout()一章節。

相關文章