核心是禁用按钮+修改文字+定时器更新，点击即设disabled=true、启动setInterval每秒减1并更新innerText，倒计时归零时clearInterval并恢复按钮状态。
点击后按钮变灰并显示倒计时
核心是禁用按钮 + 修改文字 + 定时器更新。直接操作 disabled 属性和 innerText 即可，不需要额外 DOM 重绘或框架介入。
常见错误是只改文字不设 disabled，导致用户重复点击；或者用 setTimeout 递归但没清定时器，造成内存泄漏或多次触发。
- 初始按钮需有明确的
id（如sendBtn）或通过 class 选取 - 倒计时用
setInterval，每次减 1，到 0 时清除定时器、恢复按钮状态 - 务必在点击事件里立刻禁用按钮：
btn.disabled = true - 注意浏览器对快速连续点击的响应：加防抖不如直接禁用更可靠
JavaScript 实现 60 秒倒计时的最小可行代码
下面这段可以直接粘贴进 <script> 标签运行，兼容所有现代浏览器：
const btn = document.getElementById('sendBtn');
let timer = null;
let count = 60;
btn.addEventListener('click', () => {
if (timer) return; // 防重复绑定或触发
btn.disabled = true;
btn.innerText = `${count}秒后重发`;
timer = setInterval(() => {
count--;
btn.innerText = `${count}秒后重发`;
if (count <= 0) {
clearInterval(timer);
timer = null;
count = 60;
btn.disabled = false;
btn.innerText = '发送验证码';
}
}, 1000);
});
注意：count 是闭包变量，每次点击都应重置为 60；如果按钮被禁用期间页面刷新，倒计时不会自动恢复——这是预期行为，服务端必须控制真实发送频次。
立即学习“前端免费学习笔记（深入）”；
为什么不能只靠前端倒计时防刷
前端倒计时只是体验优化，完全不可信。用户可以禁用 JS、修改 DOM、甚至直接调接口。
- 服务端必须校验同一手机号/邮箱的请求间隔（如 Redis 记录上一次发送时间）
- 前端倒计时结束 ≠ 允许发送，仍需服务端返回
200并携带新验证码才真正成功 - 若服务端拒绝发送（如频率超限），前端要根据响应恢复按钮，不能只依赖定时器
移动端点击无反馈？加 touchstart 兼容
iOS Safari 和部分安卓 WebView 对 click 事件有 300ms 延迟，导致按钮点击后视觉反馈滞后。解决方案是监听 touchstart 并阻止默认行为：
btn.addEventListener('touchstart', (e) => {
e.preventDefault();
// 然后触发你的发送逻辑或倒计时启动
}, { passive: false });
更稳妥的做法是同时绑定 click 和 touchstart，并在两个事件里共用同一套倒计时逻辑。别忘了在倒计时结束时移除 touchstart 监听器，避免内存残留。
实际项目中容易忽略的是：按钮文案在不同语言/屏幕宽度下可能换行或溢出，建议用 white-space: nowrap 和固定宽高保一致性。
