最近看一些体育比赛都是用一些倒计时计算的，而且倒计时效果在很多地方应用也很广泛的，小猿圈web前端讲师今天就给大家用JavaScript写倒计时的效果，有兴趣的小伙伴来看一下吧。
下面就直接给出实现此功能的程式码例项。
程式码例项如下:
小猿圈
*{
margin:0;
padding:0;
list-style:none;
}
body{
font-size:18px;
text-align:center;
}
.time{
height:30px;
padding:200px;
}
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
}
00天
00时
00分
00秒
上面的实现的倒计时效果，下面介绍一下它的实现过程。
一.程式码注释：
（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，小猿圈就是个不错的选择，小猿圈怎么上里面有最全最新的视讯教程，等你来学习。
