
前言很多业务场景需要倒计时比如订单支付倒计时、弹窗限时、页面等待超时自动返回。 我这边项目用 jQuery 开发直接写了一套时分秒仅分秒倒计时代码开箱即用。下面贴完整代码顺便讲清楚里面的坑。完整源码javascript运行// 倒计时总秒数根据业务自行修改 let totalSecond 120; let timer null; const $time $(.count-time); // 展示倒计时的DOM元素 function runCountdown() { // 判断倒计时结束 if (totalSecond 0) { $time.text(00:00); clearInterval(timer); // 清除定时器防止一直执行 history.back(); // 倒计时结束自动返回上一页 return; } // 计算分钟、剩余秒数 let m Math.floor(totalSecond / 60); let s totalSecond % 60; // 不足两位前面补0例如 5秒 → 05 let mm String(m).padStart(2, 0); let ss String(s).padStart(2, 0); // 赋值渲染页面 $time.text(${mm}:${ss}); // 总秒数-1 totalSecond--; } // 启动定时器1秒执行一次 timer setInterval(runCountdown, 1000); // 页面关闭/刷新时销毁定时器防止定时器后台乱跑 $(window).on(unload, function () { clearInterval(timer); });HTML 结构配套html预览div剩余时间span classcount-time/span/div代码讲解变量定义totalSecond倒计时总秒数示例 120 就是 2 分钟按需修改。timer用来存定时器标识后面清除定时器必须用到。$timejQuery 选中用来展示倒计时的标签。runCountdown 核心执行函数先判断totalSecond 0倒计时走完了。页面文字置为00:00clearInterval(timer)关掉定时器重中之重不关闭定时器会无限循环执行history.back()浏览器回退上一页可以根据业务改成弹窗、跳转链接等逻辑return 终止函数不再往下执行时间换算Math.floor(totalSecond / 60)算出一共有多少分钟向下取整。totalSecond % 60取余数得到剩下的秒数。padStart(2, 0)非常好用的方法数字转字符串不够 2 位时左边补 0。 比如m3→03保证格式永远是MM:SS。启动定时器setInterval(runCountdown, 1000)每隔 1000 毫秒1 秒执行一次倒计时函数。页面卸载监听javascript运行$(window).on(unload, function () { clearInterval(timer); });用户关闭页面、刷新页面时清除定时器。 防止页面销毁后定时器还在后台运行产生内存占用、逻辑错乱。总结这套倒计时基于原生 jQuery没有任何第三方依赖适合后台管理页面、H5 订单页面快速接入。 适合简单的限时场景订单倒计时、验证码重发、弹窗限时关闭。