当前位置：首页 > JavaScript

js按键实现重置倒计时

2026-01-31 09:58:09JavaScript

js按键实现重置倒计时

使用 JavaScript 实现按键重置倒计时

通过监听键盘事件或按钮点击事件，结合 setInterval 和 clearInterval 控制倒计时逻辑，以下是具体实现方法。

监听键盘事件重置倒计时

let countdown = 10; // 初始倒计时秒数
let timer = null;

// 开始倒计时函数
function startCountdown() {
  clearInterval(timer); // 清除之前的计时器
  countdown = 10; // 重置倒计时秒数
  updateDisplay();

  timer = setInterval(() => {
    countdown--;
    updateDisplay();
    if (countdown <= 0) {
      clearInterval(timer);
      console.log("倒计时结束");
    }
  }, 1000);
}

// 更新显示内容
function updateDisplay() {
  document.getElementById("countdown-display").textContent = countdown;
}

// 监听键盘按键（例如空格键）
document.addEventListener("keydown", (event) => {
  if (event.code === "Space") {
    startCountdown();
  }
});

// 初始化显示
updateDisplay();

通过按钮点击重置倒计时

<div id="countdown-display">10</div>
<button id="reset-button">重置倒计时</button>

<script>
  let countdown = 10;
  let timer = null;

  function startCountdown() {
    clearInterval(timer);
    countdown = 10;
    updateDisplay();

    timer = setInterval(() => {
      countdown--;
      updateDisplay();
      if (countdown <= 0) {
        clearInterval(timer);
        console.log("倒计时结束");
      }
    }, 1000);
  }

  function updateDisplay() {
    document.getElementById("countdown-display").textContent = countdown;
  }

  document.getElementById("reset-button").addEventListener("click", startCountdown);

  // 初始启动
  startCountdown();
</script>

动态调整倒计时时间

若需通过按键动态调整倒计时时长，可扩展键盘监听逻辑：

document.addEventListener("keydown", (event) => {
  if (event.code === "ArrowUp") {
    countdown += 5; // 按上箭头增加5秒
    updateDisplay();
  } else if (event.code === "ArrowDown") {
    countdown = Math.max(0, countdown - 5); // 按下箭头减少5秒
    updateDisplay();
  }
});