小猿圈web前端知識點之JavaScript倒計時效果

時間 2019-12-12

標籤 web 前端知識 javascript 倒計時效果欄目 HTML 简体版

原文原文鏈接

最近看一些體育比賽都是用一些倒計時計算的，並且倒計時效果在不少地方應用也很普遍的，小猿圈web前端講師今天就給你們用JavaScript寫倒計時的效果，有興趣的小夥伴來看一下吧。javascript

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

代碼實例以下:html

<!DOCTYPE html>前端

<html>java

<head>web

<title>小猿圈</title>spa

margin:0;

padding:0;

list-style:none;

}

body{

font-size:18px;

text-align:center;

}

.time{

height:30px;

padding:200px;

}

</style>

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>

</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函數自己。

以上就是小猿圈web前端講師對於JavaScript倒計時效果的介紹，通過以上的內容相信你對web前端有了必定的興趣，想要學習web前端就要找個好的學習平臺web前端自學②羣：738735873，小猿圈就是個不錯的選擇，小猿圈怎麼上裏面有最全最新的視頻教程，等你來學習。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。