最近看一些体育比赛都是用一些倒计时计算的，而且倒计时效果在很多地方应用也很广泛的，小猿圈web前端讲师今天就给大家用JavaScript写倒计时的效果，有兴趣的小伙伴来看一下吧。
下面就直接给出实现此功能的代码实例。
代码实例如下:
<!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('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.οnlοad=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函数本身。
以上就是小猿圈web前端讲师对于JavaScript倒计时效果的介绍，经过以上的内容相信你对web前端有了一定的兴趣，想要学习web前端就要找个好的学习平台，小猿圈就是个不错的选择，小猿圈怎么上里面有最全最新的视频教程，等你来学习。
扫一扫
693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
