JS实现倒计时功能

快到双十一了，心血来潮写了这篇博客。实现的原理比较简单，获取当前时间，与目标时间做差，然后分别计算天、小时、分钟和秒数。

原生JS实现

有两个比较关键的地方，一个是计算小时、分钟和秒数需要用到求余运算%，另外需要用到setTimeout每隔一秒钟进行递归调用。

示例代码如下：

function countDown() {
let target_time = new Date('2020/10/07').getTime(),
current_time = new Date().getTime(),
diff = target_time - current_time;
if(diff < 0) return; // 如果当前时间晚于deadline就直接return
let day = Math.floor(diff / 1000 / 60 / 60 / 24),
hour = Math.floor(diff / 1000 / 60 / 60 % 24),
min = Math.floor(diff / 1000 / 60 % 60),
sec = Math.floor(diff / 1000 % 60);
document.getElementById('day').innerText = `${day}天`;
document.getElementById('hour').innerText = `${hour}时`;
document.getElementById('minute').innerText = `${min}分`;
document.getElementById('second').innerText = `${sec}秒`;
setTimeout(countDown, 1000); // 递归调用，结束条件是当前时间晚于deadline
}

Moment.js实现

格式化时间的函数可以自己写，但是项目中比较规范的做法是调用第三方库。常用的时间处理库是Moment.js，里面有一个时长对象moment.duration，很方便就能计算出相对时间。

import moment from 'moment'
function countDown() {
let m1 = moment(),
m2 = moment('2019-05-07 08:20:00');
let duration = moment.duration(m2 - m1, 'ms'),
dd = duration.get('days'),
hh = duration.get('hours'),
mm = duration.get('minutes'),
ss = duration.get('seconds');
return `${dd}天 ${hh}时 ${mm}分 ${ss}秒`
}

顺便一提

有的同学问为什么调用第三方库才是规范做法，我这里不解释原因，就举一个项目开发中遇到的真实案例，大家可以体会一下。

我之前开发的一个Vue项目，涉及到很多页面组件，这些组件都需要格式化时间，然后分配给十几个前端RD进行开发。由于事先没有约定，结果每个人都在自己的组件里面实现了一套格式化时间的函数，逻辑重复不说，每个人的传参的方式还都不一样，后期维护还得研究代码才能知道怎么使用，这就有点头疼了。经过这次教训，后面的项目开发中都是在mixin.js中使用Moment.js定义一个时间处理函数，然后全局注册。

参考：
Moment.js中文文档

最后

以上就是闪闪乌冬面为你收集整理的JS实现倒计时功能的全部内容，希望文章能够帮你解决JS实现倒计时功能所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。