使用JavaScript计时器实现验证码button倒计时

1.计时器是用于在指定时间间隔内执行特定任务的工具。在JavaScript中，我们可以使用setTimeout和setInterval函数创建计时器。

2.setTimeout： setTimeout函数用于在指定的延迟时间后执行一次任务。

语法：setTimeout(callback, delay[, arg1, arg2, ...])

示例：

function sayHello() {
  console.log("Hello, World!");
}

setTimeout(sayHello, 2000); // 2秒后打印 "Hello, World!"

3.setInterval： setInterval函数用于在指定的时间间隔内重复执行任务。

语法：setInterval(callback, delay[, arg1, arg2, ...])

示例：

let counter = 0;

function incrementCounter() {
  counter++;
  console.log(counter);
}

setInterval(incrementCounter, 1000); // 每秒打印递增的计数器值

以下是使用JavaScript实现验证码倒计时的示例代码：

HTML部分：

<button id="btn">获取验证码</button>

JavaScript部分：

// 获取按钮元素
const btn = document.getElementById("btn");

// 设置倒计时时长（以秒为单位）
const countdownDuration = 60;

// 定义倒计时函数
function startCountdown() {
  // 禁用按钮
  btn.disabled = true;

  // 设置初始倒计时时间
  let timeLeft = countdownDuration;

  // 更新按钮文本显示倒计时
  btn.textContent = `${timeLeft}秒`;

  // 创建定时器，每秒更新倒计时时间
  const countdownTimer = setInterval(() => {
    timeLeft--;

    if (timeLeft > 0) {
      // 更新按钮文本显示倒计时
      btn.textContent = `${timeLeft}秒`;
    } else {
      // 倒计时结束，恢复按钮状态
      clearInterval(countdownTimer);
      btn.textContent = "获取验证码";
      btn.disabled = false;
    }
  }, 1000);
}

// 监听按钮点击事件，启动倒计时
btn.addEventListener("click", startCountdown);

以上就是实现一个简单的使用JavaScript实现发送验证码倒计时  感谢大家的观看~