js实现点击获取验证码倒计时效果

下面是“js实现点击获取验证码倒计时效果”的完整攻略。

1. 编写HTML

在HTML中添加一个获取验证码的按钮和一个显示倒计时的区域，代码如下：

<input type="button" value="获取验证码" id="btn" onclick="getCode()" />
<span id="countdown"></span>

2. 编写JavaScript函数

在JavaScript中编写一个函数用于获取验证码并启动倒计时：

function getCode() {
  // 获取验证码的逻辑
  // ...

  // 启动倒计时
  var seconds = 60;
  var countdownTimer = setInterval(function() {
    seconds--;
    document.getElementById("countdown").innerText = seconds + "秒后重新获取";
    if (seconds <= 0) {
      clearInterval(countdownTimer);
      document.getElementById("countdown").innerText = "";
    }
  }, 1000);
}

在该函数中，我们首先可以编写获取验证码的逻辑，比如向后台发送请求获取验证码，这里为了简单起见就省略了。

然后我们定义了一个计时器 setInterval，每隔一秒钟就更新倒计时的显示区域，当倒计时到0秒时停止计时器，并将显示区域清空。

3. 示例说明

示例一

我们可以在点击获取验证码的按钮上添加一个 disabled 属性，在倒计时期间禁用该按钮，避免用户多次点击获取验证码的按钮，从而导致重复发送短信或邮件。

<input type="button" value="获取验证码" id="btn" onclick="getCode()" disabled="disabled" />

修改获取验证码的函数：

function getCode() {
  // 获取验证码的逻辑
  // ...

  // 禁用按钮
  document.getElementById("btn").setAttribute("disabled", "disabled");

  // 启动倒计时
  var seconds = 60;
  var countdownTimer = setInterval(function() {
    seconds--;
    document.getElementById("countdown").innerText = seconds + "秒后重新获取";
    if (seconds <= 0) {
      clearInterval(countdownTimer);
      document.getElementById("countdown").innerText = "";
      // 可以在倒计时结束后启用按钮
      document.getElementById("btn").removeAttribute("disabled");
    }
  }, 1000);
}

示例二

我们可以用 localStorage 来记录倒计时结束时间，当用户离开页面并重新进入时，可以根据记录的时间来判断是否需要重新启动倒计时。

修改获取验证码的函数：

function getCode() {
  // 获取验证码的逻辑
  // ...

  // 设置倒计时结束时间
  var expireTime = new Date().getTime() + 60000; // 假设倒计时1分钟
  localStorage.setItem("expireTime", expireTime);

  // 禁用按钮
  document.getElementById("btn").setAttribute("disabled", "disabled");

  // 启动倒计时
  var countdownTimer = setInterval(function() {
    var remainTime = parseInt((localStorage.getItem("expireTime") - new Date().getTime()) / 1000);
    if (remainTime <= 0) {
      clearInterval(countdownTimer);
      document.getElementById("countdown").innerText = "";
      // 可以在倒计时结束后启用按钮
      document.getElementById("btn").removeAttribute("disabled");
    } else {
      document.getElementById("countdown").innerText = remainTime + "秒后重新获取";
    }
  }, 1000);
}

以上两个示例仅是其中的两种可能，根据实际情况可以按需适配。