倒计时结束后才允许点击按钮，核心是通过 setInterval 每秒递减并更新显示，归零时 clearInterval 并设置 button.disabled = false；点击事件中需二次校验 disabled 状态以防绕过。
倒计时结束后才允许点击按钮，核心是控制按钮的 disabled 属性，并在倒计时归零时移除禁用状态。关键在于：定时器运行期间保持按钮禁用，结束时启用并可触发点击。
1. 基础 HTML 结构
按钮初始设为 disabled，防止用户提前操作：
<span id="countdown">30</span>秒后可点击
2. 启动倒计时并动态控制按钮状态
用 setInterval 每秒更新剩余时间，归零时清除定时器、启用按钮：
const btn = document.getElementById('submitBtn');
const countdownEl = document.getElementById('countdown');
let seconds = 30;
const timer = setInterval(() => {
seconds--;
countdownEl.textContent = seconds;
if (seconds <= 0) {
clearInterval(timer);
btn.disabled = false;
}
}, 1000);
</script>
3. 点击逻辑需配合禁用状态检查（可选但推荐）
即使按钮视觉上已启用，仍建议在点击事件中再次校验，避免用户通过 DevTools 手动移除 disabled：
立即学习“Java免费学习笔记（深入）”；
- 给按钮绑定点击事件
- 事件内先判断
btn.disabled === false - 满足条件再执行业务逻辑（如提交表单、发送请求）
4. 进阶提示：避免重复点击和倒计时中断
实际使用中建议补充以下细节：
- 倒计时开始前禁用按钮，防止多次触发定时器
- 启用按钮后，可添加一次性的点击处理（如用
once: true或手动解绑） - 若需支持重新倒计时，应先清除旧定时器再启动新的
- 考虑页面卸载或标签页切换时暂停/恢复倒计时（用
visibilitychange事件）
