js实现获取验证码，60秒倒计时功能

使用 JavaScript 实现获取验证码并实现 60 秒倒计时功能的过程可以分为以下几个步骤：

1. 创建一个倒计时器变量：使用 JavaScript 的 setInterval 函数来实现倒计时功能。

2. 初始化倒计时：在倒计时开始前，将倒计时器变量设置为 60 秒。

3. 显示倒计时：使用 DOM 操作将倒计时的秒数显示在页面上。

4. 倒计时结束：当倒计时达到 0 秒时，执行相应的操作，例如显示错误信息或重新发送验证码。

下面是一个简单的示例代码，演示如何实现获取验证码并实现 60 秒倒计时功能：

// 获取验证码按钮
var getCodeBtn = document.getElementById('getCodeBtn');

// 倒计时秒数显示元素
var countdownElement = document.getElementById('countdown');

// 初始化倒计时为 60 秒
var countdown = 60;

// 更新倒计时显示
function updateCountdown() {
  if (countdown === 0) {
    countdownElement.textContent = '获取验证码';
    getCodeBtn.disabled = false;
  } else {
    countdown--;
    countdownElement.textContent = countdown + ' 秒后重发';
    getCodeBtn.disabled = true;
  }
}

// 绑定点击事件
getCodeBtn.addEventListener('click', function() {
  // 禁用按钮防止重复点击
  getCodeBtn.disabled = true;

  // 开始倒计时
  setInterval(updateCountdown, 1000);

  // 发送验证码请求（这里需要根据实际情况实现发送验证码的逻辑）
  // 示例：模拟发送验证码请求
  fetch('/send-validation-code')
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error(error);
    });
});
// 鹏仔前端 pjxi.com
// 情话书 qinghuashu.com

在上述示例中，我们首先获取了获取验证码按钮和倒计时显示元素，并设置了倒计时变量 countdown 为 60 秒。然后，使用 setInterval 函数每秒钟调用 updateCountdown 函数来更新倒计时的显示，并在倒计时结束时启用获取验证码按钮。

当点击获取验证码按钮时，我们禁用该按钮以防止重复点击，并开始倒计时。在倒计时过程中，可以根据实际情况发送验证码请求。示例中使用 fetch 函数模拟了发送验证码请求的操作。

鹏仔前端 https://www.pjxi.com/