JS 实现倒计时
既然是倒计时,肯定是要涉及到时间日期的操作了。js 里可以用 new Date() 来
创建各种格式的时间日期。要能够倒计时,我们需要设置一个起始时间以及一个
终止时间,计算出这两段时间的差,然后通过循环调用,每隔 1 秒刷新一次就
实现了。假设我们以当前电脑的时间作为起始时间,然后定死一个终止时间,由
于起始时间一直在递增,而终止时间不变,那么通过递归后就是一个倒计时了。
整体思路不难理解,不过真正实现其代码来还是有诸多需要注意的。
实战
知道了大致实现思路后,你可以试着开始手写代码。我们定义一个函数,名为
countDown 。首先获取当前时间,现在是北京时间 2019 年 3 月 16 日,16 时 57
分,倒计时 1 小时,那么终止时间是 2019 年 3 月 16 日,17 时 57 分 。
function countDown(){
var nowtime = new Date();
var endtime = new Date("2019/03/16,17:57:00");
var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) /
1000);
}
lefttime 保存着两个时间的差值,getTime() 方法获取到时间戳,由于它是以 ms
为单位的,我们需要精确到秒就可以,所以除以 1000 就是以 s 为单位。
接着,我们可以将这个时间分别计算为 天,时,分,秒 了。代码如下
var d = parseInt(lefttime / (24*60*60))
var h = parseInt(lefttime / (60 * 60) % 24);
var m = parseInt(lefttime / 60 % 60);
var s = parseInt(lefttime % 60);
1 天 24 小时,1 小时 60 分钟,1 分钟 60 秒,稍微转换就能计算出上面几个
变量的值。到了这里,有个小细节需要注意,如果是 10 以下的数我们要进行补
零!。于是我们在写一个补零函数,名为 addZero .
function addZero(){
return i < 10 ? "0" + i: i + "";
}
好了,接下来对上面求得的 d,h,m,s 进行补零。
d = addZero(d)
h = addZero(h);