JS使用setInterval实现倒计时功能

setInterval() 是JS的一个全局函数，可以按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由于setInterval的循环特性，所以用于计算时间特别合适。

JS实现思路也特别简单：获取目标时间和当前时间 => 计算时间差 => 重复计算并渲染到页面

• 首先获取两个时间点：

var date = new Date('2022/1/1 00:00:00').getTime();//获取目标时间的时间戳
var now = new Date().getTmie();//当前时间戳

• 上面代码获取了两个时间点，下面计算一下时间差：

var second = Math.floor((date - now) / 1000);//时间差秒数
var day = Math.floor(second / 86400);//时间差天数
second = second % 86400;//除去天数剩下的秒数
var hour = Math.floor(second / 3600);//剩下秒数的小时数
second %= 3600;//除去小时数剩下的秒数
var minute = Math.floor(second / 60);//剩下秒数的分钟数
second %= 60;//除去分钟数剩下的秒数

• 上面计算完成后我们获取到了时间差的天数、小时、分钟和秒数，如果要年数可以自行计算，但是觉得没有太大必要。然后将上面封装成函数并重复1秒调用即可，先简单打印验证一下是否实现效果。

function getDate(){
 var date = new Date('2022/1/1 00:00:00').getTime();//获取目标时间的时间戳
 var now = new Date().getTmie();//当前时间戳
 var second = Math.floor((date - now) / 1000);//时间差秒数
 var day = Math.floor(second / 86400);//时间差天数
 second = second % 86400;//除去天数剩下的秒数
 var hour = Math.floor(second / 3600);//剩下秒数的小时数
 second %= 3600;//除去小时数剩下的秒数
 var minute = Math.floor(second / 60);//剩下秒数的分钟数
 second %= 60;//除去分钟数剩下的秒数
 console.log("还剩 "+day+" 天 "+hour+" 小时 "+minute+" 分钟 "+second+" 秒 ");
}
setInterval(getDate, 1000);//每秒调用上面的函数，控制台每秒输出

后面渲染的操作只需替换输出控制台的操作即可，这里也简单的实现一下，实现的方法也不止一种。

• 完整示例HTML代码：

 
 
 


 

 
距离2022年还有
 

 
 

效果预览图：

2022倒计时

白驹过隙，转眼间已近岁末。时间在悄然流逝，年华在匆匆而过；时光无限荏苒，光阴不再重复，记忆永远成了昨天。