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显示。