本文共 1592 字，大约阅读时间需要 5 分钟。

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

原生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定义一个时间处理函数，然后全局注册。

参考：