js点击按钮开始倒计时

基础概念

JavaScript中的倒计时通常是通过设置一个定时器（如setInterval）来实现的。每次定时器触发时，更新显示的时间，并在时间到达零时停止定时器。

类型

简单倒计时：从设定时间开始倒数到零。
重复倒计时：到达零后重新开始倒数。
可暂停/恢复倒计时：允许用户在倒计时过程中暂停和恢复。

应用场景

在线考试：限制考生答题时间。
抢购活动：显示距离活动开始的剩余时间。
定时任务提醒：提醒用户即将到来的重要事件。

示例代码

以下是一个简单的JavaScript倒计时示例，当用户点击按钮时开始倒计时：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时示例</title>
<script>
let countdown;
const timerDisplay = document.querySelector('#time');
let timeLeft = 10; // 倒计时秒数

function startCountdown() {
  countdown = setInterval(() => {
    if (timeLeft > 0) {
      timerDisplay.textContent = timeLeft;
      timeLeft--;
    } else {
      clearInterval(countdown);
      timerDisplay.textContent = '时间到!';
    }
  }, 1000);
}
</script>
</head>
<body>
<h1>倒计时: <span id="time">10</span> 秒</h1>
<button onclick="startCountdown()">开始倒计时</button>
</body>
</html>

可能遇到的问题及解决方法

问题： 倒计时结束后定时器没有停止。 原因： 可能是因为clearInterval没有正确调用，或者countdown变量在多次点击按钮后被重复设置。 解决方法： 确保每次开始新的倒计时前都清除之前的定时器，并且检查countdown变量是否正确引用当前的定时器ID。

function startCountdown() {
  clearInterval(countdown); // 清除之前的定时器
  timeLeft = 10; // 重置时间
  timerDisplay.textContent = timeLeft;
  countdown = setInterval(() => {
    if (timeLeft > 0) {
      timerDisplay.textContent = timeLeft;
      timeLeft--;
    } else {
      clearInterval(countdown);
      timerDisplay.textContent = '时间到!';
    }
  }, 1000);
}

通过这种方式，可以确保每次点击按钮都会开始一个新的倒计时，并且之前的倒计时会被正确停止。