js实现验证码倒计时
实现验证码倒计时功能
验证码倒计时功能通常用于限制用户频繁获取验证码，提升用户体验。以下是使用JavaScript实现验证码倒计时的完整方案：
基本实现代码
let countdown = 60;
let timer = null;
function startCountdown(button) {
button.disabled = true;
timer = setInterval(() => {
countdown--;
button.textContent = `${countdown}秒后重新获取`;
if (countdown <= 0) {
clearInterval(timer);
button.disabled = false;
button.textContent = '获取验证码';
countdown = 60;
}
}, 1000);
}
// HTML中调用示例
// <button onclick="startCountdown(this)">获取验证码</button>优化版本（防止重复点击）
function startCountdown(button) {
if (button.disabled) return;
let countdown = 60;
button.disabled = true;
const timer = setInterval(() => {
button.textContent = `重新获取(${countdown}s)`;
countdown--;
if (countdown < 0) {
clearInterval(timer);
button.disabled = false;
button.textContent = '获取验证码';
}
}, 1000);
}带样式版本
<style>
.countdown-btn {
padding: 8px 15px;
background: #1890ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.countdown-btn:disabled {
background: #ccc;
cursor: not-allowed;
}
</style>
<button class="countdown-btn" onclick="startCountdown(this)">获取验证码</button>使用Promise封装
function startCountdown(button, seconds = 60) {
return new Promise((resolve) => {
button.disabled = true;
let remaining = seconds;
const timer = setInterval(() => {
button.textContent = `${remaining}秒后重试`;
remaining--;
if (remaining < 0) {
clearInterval(timer);
button.disabled = false;
button.textContent = '获取验证码';
resolve();
}
}, 1000);
});
}
// 调用示例
document.getElementById('verify-btn').addEventListener('click', async function() {
await startCountdown(this);
// 倒计时结束后执行的操作
});注意事项
- 确保在页面卸载时清除定时器，防止内存泄漏
- 移动端需要考虑触摸反馈和禁用状态样式
- 实际项目中建议将倒计时状态保存在服务端，防止客户端篡改
以上实现方案可以根据实际项目需求进行组合和调整，核心逻辑是通过setInterval实现时间递减并更新UI显示。
