JavaScript 天小時分鐘和秒倒計時

2019-6-13 23:38| 作者: antzone| 查看: 2206| 評論: 0|來自: 螞蟻部落

倒計時效果在很多網站中都有應用,用途也比較廣泛,比如體育賽事倒計時,或者一些考試或者婚禮假期等。

下面就直接給出實現此功能的代碼實例。

代碼實例如下:

[HTML] 純文本查看 復制代碼运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.tlmhwf.tw/" />
<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('2022/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()可以參閱JavaScript setTimeout()一章節。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
浙江6十1开奖号码查询r