在网页交互里，一分钟倒计时是很常见的需求，比如获取验证码、答题限时或者活动等待。用HTML配合JavaScript可以轻松实现，但要想计时准确且不乱套，写法上有一些细节需要注意。下面从结构、样式到脚本逐步说明。
一、基础HTML结构
先准备一个用来显示时间的容器，以及一个控制开始的按钮。HTML本身不能自己跑计时逻辑，它只负责把内容摆出来，真正的倒计时靠脚本驱动。
我们用一个span放剩余秒数，再用一个button触发开始。这样结构清晰，后续用JavaScript通过id拿到节点即可操作。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>一分钟倒计时</title> </head> <body> <h3>距离结束还有：<span id="time">60</span>秒</h3> <button id="startBtn">开始倒计时</button> <script src="countdown.js"></script> </body> </html>
二、用setInterval实现秒级递减
最直观的思路是声明一个变量从60往下减，每隔一秒改一次页面文字。setInterval能按固定周期执行函数，非常适合这种重复动作。
不过要注意，setInterval的间隔并不是绝对精准，浏览器在后台标签页会降频，单纯自减可能越走越慢。下面的写法适合对精度要求不高的场景，代码也最好懂。
let left = 60;
const timeEl = document.getElementById('time');
const btn = document.getElementById('startBtn');
let timer = null;
btn.addEventListener('click', function () {
if (timer) return; // 防止重复点击
timer = setInterval(function () {
left = left - 1;
timeEl.textContent = left;
if (left <= 0) {
clearInterval(timer);
timer = null;
alert('时间到');
}
}, 1000);
});
上面用clearInterval在归零时停掉定时器，否则函数还会继续跑，left变成负数。同时用timer变量锁住按钮，避免用户连点开出多个计时器互相打架。
这种写法简单，但假如页面卡了一下或者标签切到后台，回来时数字可能少跳一两秒。对验证码这类场景，偏差几秒通常能接受。
三、基于时间戳的准确写法
如果希望哪怕页面被挂起也能准点结束，就不要依赖自减，而是记录结束时间，每次都用结束时间减当前时间算出剩余秒数。
这样每次执行都重新校对，不会把之前的延迟累积下去。下面改成以未来时间戳为目标，用Math.ceil处理小数，保证显示整数秒。
let endTime = 0;
let timer = null;
const timeEl = document.getElementById('time');
const btn = document.getElementById('startBtn');
btn.addEventListener('click', function () {
if (timer) return;
endTime = Date.now() + 60 * 1000; // 60秒后的时间戳
timer = setInterval(function () {
const left = Math.ceil((endTime - Date.now()) / 1000);
if (left <= 0) {
timeEl.textContent = 0;
clearInterval(timer);
timer = null;
alert('时间到');
} else {
timeEl.textContent = left;
}
}, 250); // 稍快轮询，减少跳秒感
});
这里把间隔设为250毫秒，让页面更跟手，但显示依旧是整秒。用Date.now()拿当前毫秒时间，减去目标值再除一千，就是剩余秒数。
这种方案在用户切走再回来时，会立刻算出真实剩余，不会悄悄变慢，是更稳的生产环境写法。
四、重置与样式优化
实际页面常需要重置按钮，或者时间到了变红提示。我们可以加一个reset函数，把left和endTime清掉，文字恢复初始。
另外用一点CSS让数字醒目，也可以在最后十秒加class触发样式变化，提升体验。
#time {
font-size: 24px;
color: #333;
}
#time.warning {
color: #e00;
font-weight: bold;
}
function reset() {
if (timer) {
clearInterval(timer);
timer = null;
}
endTime = 0;
timeEl.textContent = 60;
timeEl.classList.remove('warning');
}
// 在倒计时逻辑里添加
if (left <= 10) timeEl.classList.add('warning');
把重置逻辑绑到另一个按钮上，用户就能反复练习或重新获取验证码。注意重置时一定要清定时器，不然旧计时还在跑。
整体看，HTML只管容器，JavaScript用setInterval加Date算时间，再配合class做提示，就是一套完整的一分钟倒计时。按上面分步抄改，基本能覆盖大部分前端倒计时的需要。
HTMLJavaScriptsetInterval修改时间：2026-08-05 14:09:37