当前位置：首页 > JavaScript

js按键实现重置倒计时

2026-03-02 01:12:53JavaScript

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

以下是一个简单的JavaScript实现，通过按键重置倒计时的示例代码。该代码使用键盘事件监听器来检测按键，并在按键按下时重置倒计时。

js按键实现重置倒计时

// 定义倒计时初始时间（秒）
let countdownTime = 10;
let timer;

// 获取显示倒计时的DOM元素
const countdownDisplay = document.getElementById('countdown-display');

// 启动倒计时函数
function startCountdown() {
  clearInterval(timer);
  countdownDisplay.textContent = countdownTime;

  timer = setInterval(() => {
    countdownTime--;
    countdownDisplay.textContent = countdownTime;

    if (countdownTime <= 0) {
      clearInterval(timer);
      countdownDisplay.textContent = '时间到！';
    }
  }, 1000);
}

// 监听键盘按键事件
document.addEventListener('keydown', (event) => {
  // 检查是否按下特定按键（例如空格键）
  if (event.code === 'Space') {
    countdownTime = 10; // 重置倒计时时间
    startCountdown();   // 重新开始倒计时
  }
});

// 初始化倒计时
startCountdown();

HTML部分

需要在HTML中添加一个用于显示倒计时的元素：

<div id="countdown-display"></div>

实现说明

初始化变量：设置倒计时的初始时间和一个用于存储计时器的变量。
倒计时函数：startCountdown函数清除现有计时器，更新显示，并每秒减少倒计时时间。
按键监听：通过addEventListener监听键盘事件，当按下指定按键（如空格键）时，重置倒计时并重新开始。
显示更新：倒计时显示在指定的DOM元素中，并在时间到达0时显示“时间到！”。

自定义按键

可以通过修改event.code来指定不同的按键。例如：

'Space'：空格键
'Enter'：回车键
'KeyR'：R键

扩展功能

多按键支持：可以添加多个按键条件，使用||运算符组合。
```
if (event.code === 'Space' || event.code === 'Enter') {
  // 重置逻辑
}
```
动态初始时间：可以通过输入框或其他方式动态设置初始时间。
视觉反馈：添加CSS样式或动画，增强用户体验。

通过上述代码和说明，可以实现一个简单的按键重置倒计时功能，并根据需要进行扩展和定制。

js按键实现重置倒计时