JavaScript 如何做倒计时

打开手机的外卖APP，选好餐点提交，看着页面上“支付剩余1分30秒”的数字不断跳动，这就是我们每天都在接触的倒计时。在网页里，这个功能大多靠JavaScript实现。很多人觉得写代码做倒计时难，其实只要拆成“启动计时器”“更新数字”“结束处理”三步，用日常的例子就能轻松弄懂。

第一步：先搞懂“时间差”——别搞错倒计时的核心

倒计时的本质，是算“当前时间”和“结束时间”的差距。比如外卖超时要关单，设置的结束时间是10分钟后，每过1秒就用结束时间减当前时间，得到的就是剩余时间。

举个生活化的例子：你和朋友约好15分钟后在咖啡馆见面，现在是14:00，结束时间是14:15，每过1分钟，你用14:15减去现在的时间，就能知道还剩多少分钟。放到代码里，Date.now()就相当于你手里的“当前时钟”，它会实时返回从某固定时间到现在的毫秒数，计算剩余时间只需要用结束时间的毫秒数减去当前时间的毫秒数，再转成“分、秒”就可以。

第二步：用定时器“跑起来”——让数字跳起来的关键

有了时间差，还得让它每隔1秒更新一次，这就要用到JavaScript里的定时器。最常用的是setInterval，它的作用就是“每隔指定时间，就执行一次里面的代码”。

还是用约朋友的例子：你把见面时间记在本子上，每隔1分钟就翻页看一下现在的时间，然后算还剩多久，再跟朋友说一声“还剩X分钟”。setInterval就代替了你“每隔1分钟翻本子、算时间、报结果”的动作，把“每1秒更新剩余时间”的逻辑写在里面，数字就会像外卖页那样跳起来。

这里要注意一个小细节：定时器的时间单位是毫秒，所以要写1000，代表1秒，不是1，别少写了三个0，不然倒计时会快1000倍，就成“飞毛腿倒计时”了。

第三步：处理“倒计时结束”——别让它一直跑

如果只写定时器，倒计时到0之后会一直显示负数，这就像你和朋友约好的时间过了，还一直说“还剩-1分钟”，显然不对。所以要加个判断：当剩余时间小于等于0时，停止定时器，然后显示“时间到了”或者做其他事。

停止定时器的方法也很简单：给setInterval的返回值起个名字，比如timer，到时候用clearInterval(timer)就能把这个“翻本子的动作”停下来。对应到生活里，就是朋友见面时间到了，你就不用再每隔1分钟看时间、报剩余了，直接约下一件事就行。

实际写个简单的例子（一看就会）

我们可以做个网页上的10秒倒计时，打开浏览器控制台就能测试：

• 先设置结束时间：比如现在过10秒结束，const endTime = Date.now() + 10000;
• 写更新时间的函数：每1秒算差，转成秒数，const diff = endTime - Date.now(); const seconds = Math.ceil(diff / 1000);

启动定时器，到0就停：

`const timer = setInterval(() => {

const diff = endTime - Date.now();

if (diff <= 0) {

clearInterval(timer);

console.log("时间到！");

} else {

console.log(剩余时间：${Math.ceil(diff / 1000)}秒);

}

}, 1000);`

这样运行后，控制台会从10开始，每秒减1，到0就停，完全符合我们要的效果。

其实JavaScript做倒计时的核心，就是“算时间差、用定时器更新、结束时停止”这三步，不管是外卖支付、活动抽奖还是考试计时，本质都是这个逻辑。只要把每个部分对应到生活里的具体动作，就不会觉得复杂了。