小猿圈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，小猿圈就是个不错的选择，小猿圈怎么上里面有最全最新的视频教程，等你来学习。