js实现发送验证码后的倒计时功能

下面是一个完整的JavaScript实现发送验证码后的倒计时功能攻略，分以下几个步骤：

1. 准备工作

首先，在你的HTML代码中添加一个按钮和一个用于显示时间的容器，如下面的代码所示：

<button id="send-btn">发送验证码</button>
<span id="countdown-container"></span>

2. 编写倒计时函数

接着，我们需要编写一个倒计时函数，以便在按钮被点击后开始倒计时。该函数的基本结构如下：

function countdown(seconds) {
  // TODO: 倒计时逻辑
}

其中，seconds参数表示倒计时的总时间（单位为秒），例如60秒。在函数内部，我们需要使用setInterval函数来每隔1秒更新倒计时，并将剩余的时间显示出来。

下面是一个具体的实现示例：

function countdown(seconds) {
  var remainingSeconds = seconds;
  var countdownInterval = setInterval(function() {
    if (remainingSeconds <= 0) {
      clearInterval(countdownInterval); // 清除计时器
      // TODO: 倒计时结束之后的逻辑
    } else {
      // 更新剩余时间并显示出来
      remainingSeconds--;
      var countdownContainer = document.getElementById("countdown-container");
      countdownContainer.textContent = remainingSeconds + "秒";
    }
  }, 1000);
}

在上面的代码中，我们使用了一个remainingSeconds变量来记录还剩多少秒，然后每隔1秒更新一下剩余时间并将其显示在countdown-container容器中。

当剩余时间为0时，我们清除setInterval函数创建的计时器，并执行相应的倒计时结束逻辑。

3. 绑定按钮点击事件

最后一步，我们需要在按钮被点击时执行倒计时函数，并在发送验证码请求成功后开始倒计时。

绑定按钮点击事件的代码如下：

var sendBtn = document.getElementById("send-btn");
sendBtn.addEventListener("click", function() {
  sendVerificationCode(function() {
    // 发送验证码请求成功之后开始倒计时
    countdown(60); // 60秒倒计时
  });
});

在上面的代码中，我们使用addEventListener方法为按钮绑定了一个click事件处理函数，该函数在按钮被点击时执行。

在点击事件处理函数中，我们首先调用了一个名为sendVerificationCode的函数来发送验证码请求。如果请求成功，我们将开始一个60秒的倒计时。

示例说明：

示例1

例如，假如我们有一个发送验证码的按钮，并且我们想要在用户点击该按钮之后开始一个60秒的倒计时，并在倒计时结束后执行一些逻辑（例如重新激活发送验证码按钮），可以使用上述代码来实现。

<button id="send-btn">发送验证码</button>
<span id="countdown-container"></span>

var sendBtn = document.getElementById("send-btn");
sendBtn.addEventListener("click", function() {
  sendVerificationCode(function() {
    countdown(60);
  });
});

示例2

另外，如果我们希望在每次发送验证码之前先检查用户的手机号码是否正确，并在手机号码无效时向用户显示相应的错误信息，可以在sendVerificationCode函数中添加一些逻辑来实现：

function sendVerificationCode(callback) {
  var phoneNumber = document.getElementById("phone-number-input").value;
  if (!isValidPhoneNumber(phoneNumber)) {
    alert("请输入正确的手机号码！");
    return;
  }
  // 发送验证码请求...
  // 如果请求成功，执行回调函数
  callback();
}

在上面的示例中，我们使用了一个名为isValidPhoneNumber的函数来判断用户输入的手机号码是否正确，如果不正确，则弹出一个错误提示框并结束sendVerificationCode函数的执行。否则，继续发送验证码请求并执行回调函数。