JS实现验证码倒计时效果

在注册、登录等过程中，我们常常需要输入验证码以确保账户安全。而验证码通常会有一个倒计时，如果不再规定的时间内完成输入，则验证码失效。本文将介绍如何利用JavaScript实现验证码倒计时效果。

创建HTML结构

首先我们需要创建一个HTML结构，这里我们创建一个简单的表单，其中包含手机号、验证码以及发送验证码的按钮。

<form>
  <label for="phone">手机号：</label>
  <input type="text" id="phone" name="phone">
  <br>
  <label for="code">验证码：</label>
  <input type="text" id="code" name="code">
  <button type="button" id="sendCode">发送验证码</button>
</form>

编写JavaScript代码

接着我们编写JavaScript代码，实现发送验证码并倒计时的功能。

// 获取DOM元素
var phoneInput = document.getElementById('phone')
var codeInput = document.getElementById('code')
var sendCodeBtn = document.getElementById('sendCode')

// 定义倒计时时间
var countdownTime = 60

// 发送验证码函数
function sendCode() {
  // 判断手机号是否合法，这里简单处理，只判断是否为11位数字
  if (phoneInput.value && /^\d{11}$/.test(phoneInput.value)) {
    // 模拟发送验证码的过程，这里用了setTimeout实现
    setTimeout(function () {
      // 发送成功后禁用发送按钮并开始倒计时
      sendCodeBtn.disabled = true
      countdown()
    }, 1000)
  }
}

// 倒计时函数
function countdown() {
  // 更新发送按钮的文本和样式
  sendCodeBtn.textContent = countdownTime + '秒后重新发送'
  sendCodeBtn.style.backgroundColor = '#ccc'

  if (countdownTime > 0) {
    // 当倒计时未结束时，继续倒计时
    countdownTime--
    setTimeout(countdown, 1000)
  } else {
    // 当倒计时结束时，恢复发送按钮的文本和样式
    sendCodeBtn.textContent = '发送验证码'
    sendCodeBtn.style.backgroundColor = ''
    sendCodeBtn.disabled = false
    countdownTime = 60
  }
}

// 监听发送按钮的点击事件，调用发送验证码函数
sendCodeBtn.addEventListener('click', sendCode)

总结

以上便是实现验证码倒计时效果的完整代码。通过编写JavaScript代码，我们实现了发送验证码、倒计时，并且在倒计时结束时恢复发送按钮的状态。这样我们就可以为用户提供更加便捷的账户验证操作了。