javascript实现发送短信倒计时

为在网页上实现发送短信倒计时，需要使用JavaScript编写代码。具体实现过程如下。

1. HTML文件中，需要加入一个用于显示验证码的按钮。按钮的初始状态为“发送验证码”，点击后会触发发送验证码的函数。

<button id="send">发送验证码</button>

1. 在JavaScript文件中，需要定义一个计时器函数，用于倒计时。函数中应该设置计时器变量，并对按钮的状态进行改变。在倒计时结束时，需要清除计时器变量，并重新恢复按钮的状态。

function countDown() {
  var count = 60; // 设置计时秒数
  var timer = setInterval(function() {
    count--;
    var btn = document.getElementById("send");
    btn.disabled = true;
    btn.innerHTML = count + " 秒后重新获取";
    if (count == 0) {
      clearInterval(timer);
      btn.disabled = false;
      btn.innerHTML = "发送验证码";
    }
  }, 1000);
}

1. 在发送验证码的函数中，需要调用计时器函数，并通过AJAX发送请求。该请求的相关参数应该写在URL中。请求发送成功后，调用计时器函数，实现倒计时。

function sendVerificationCode() {
  var req = new XMLHttpRequest();
  var url = "/api/sms/send?phone=1234567890"; // 请求URL
  req.open("GET", url);
  req.onreadystatechange = function() {
    if (req.readyState == 4 && req.status == 200) {
      countDown();
      console.log(req.responseText);
    }
  };
  req.send();
}

1. HTML文件中，需要在按钮上添加点击事件，当用户点击按钮时，调用发送验证码函数。

<button id="send" onclick="sendVerificationCode()">发送验证码</button>

1. 程序运行时，点击按钮，页面会向服务器发送请求，请求成功后，计时器会开始倒计时，并在按钮上显示剩余时间。在倒计时结束后，按钮恢复初始状态，用户可以重新点击发送验证码。

示例1：我们在HTML文件中添加一个带有id属性的span元素，用于实现在倒计时过程中显示提示文本。在倒计时结束时，需要将该元素的内容清空。代码如下：

<button id="send" onclick="sendVerificationCode()">发送验证码</button>
<span id="tip"></span>

在JavaScript代码中，需要修改计时器函数：

function countDown() {
  var count = 60; // 设置计时秒数
  var timer = setInterval(function() {
    count--;
    var btn = document.getElementById("send");
    btn.disabled = true;
    btn.innerHTML = count + " 秒后重新获取";
    var tip = document.getElementById("tip");
    tip.innerText = "验证码已发送，请注意查收";
    if (count == 0) {
      clearInterval(timer);
      btn.disabled = false;
      btn.innerHTML = "发送验证码";
      tip.innerText = "";
    }
  }, 1000);
}

示例2：在发送验证码的请求中，可能会遇到请求失败的情况。为避免用户长时间等待导致误解，我们可以在请求失败后，停止倒计时，并修改按钮的提示文本。代码如下：

function sendVerificationCode() {
  var req = new XMLHttpRequest();
  var url = "/api/sms/send?phone=1234567890"; // 请求URL
  req.open("GET", url);
  req.onreadystatechange = function() {
    if (req.readyState == 4) {
      if (req.status == 200) {
        countDown();
        console.log(req.responseText);
      } else {
        clearInterval(timer);
        var btn = document.getElementById("send");
        btn.disabled = false;
        btn.innerHTML = "发送验证码";
        var tip = document.getElementById("tip");
        tip.innerText = "发送验证码失败，请稍后再试";
      }
    }
  };
  req.send();
}

在界面中，我们需要添加一个用于显示错误信息的span元素。

<button id="send" onclick="sendVerificationCode()">发送验证码</button>
<span id="tip"></span>
<span id="error"></span>