js发送短信验证码后60秒倒计时怎么设置

在JavaScript中设置倒计时可以使用setTimeout函数来实现。以下是一个简单的例子，展示了如何在发送短信验证码后设置一个60秒的倒计时。假设你已经有一个发送验证码的函数sendSmsCode()和一个显示倒计时的函数displayCountdown()。

当用户触发发送验证码的操作时，调用sendSmsCode()函数，然后立即开始倒计时，倒计时每秒钟更新一次，直到倒计时结束（本例中是60秒）。

HTML部分可能如下所示：

<button id="sendCodeBtn">发送验证码</button>
<div id="countdown">60秒</div>

JavaScript部分可能如下所示：

let countdownTimer; // 用于存储定时器的引用
let countdownSeconds = 60; // 倒计时秒数
function sendSmsCode() {
  // 这里是发送短信验证码的逻辑
  // ...
  
  // 开始倒计时
  startCountdown();
}
function startCountdown() {
  countdownSeconds = 60; // 重置倒计时秒数
  displayCountdown(); // 显示倒计时
  countdownTimer = setInterval(() => {
    if (countdownSeconds > 0) {
      countdownSeconds--; // 每秒减一
      displayCountdown(); // 更新显示
    } else {
      clearInterval(countdownTimer); // 倒计时结束，清除定时器
      // 这里可以添加倒计时结束后的操作，比如重新发送验证码或者提示用户等
    }
  }, 1000); // 每秒更新一次
}
function displayCountdown() {
  const countdownElement = document.getElementById(’countdown’);
  countdownElement.textContent =剩余${countdownSeconds}秒;
}
// 获取发送验证码的按钮并添加点击事件
const sendCodeBtn = document.getElementById(’sendCodeBtn’);
sendCodeBtn.addEventListener(’click’, sendSmsCode);

在这个例子中，当用户点击“发送验证码”按钮时，会触发sendSmsCode()函数，开始倒计时，每秒钟，setInterval()都会调用其回调函数来更新倒计时，并在倒计时结束后清除定时器。displayCountdown()函数用于在界面上显示剩余的倒计时时间。