js按键实现重置倒计时
使用 JavaScript 实现按键重置倒计时
以下是一个完整的示例代码，通过按键事件重置倒计时功能：
// 定义倒计时变量和初始时间
let countdown;
let timeLeft = 10; // 初始倒计时10秒
const timerDisplay = document.getElementById('timer');
const resetButton = document.getElementById('resetButton');
// 更新显示的倒计时
function updateDisplay() {
timerDisplay.textContent = timeLeft;
}
// 倒计时函数
function startCountdown() {
clearInterval(countdown); // 清除现有倒计时
timeLeft = 10; // 重置时间
updateDisplay();
countdown = setInterval(() => {
timeLeft--;
updateDisplay();
if (timeLeft <= 0) {
clearInterval(countdown);
timerDisplay.textContent = "时间到!";
}
}, 1000);
}
// 按键重置事件
resetButton.addEventListener('click', startCountdown);
// 键盘事件重置
document.addEventListener('keydown', (event) => {
if (event.code === 'Space') { // 空格键重置
startCountdown();
}
});
// 初始化倒计时
startCountdown();HTML 结构示例
<div>
<p>剩余时间: <span id="timer">10</span>秒</p>
<button id="resetButton">重置倒计时</button>
</div>
<p>按空格键也可重置</p>实现要点
- 使用
setInterval创建倒计时功能，每秒减少剩余时间 - 通过
clearInterval清除现有倒计时 - 为按钮添加点击事件监听器
- 为文档添加键盘事件监听器，检测空格键按下
- 倒计时结束时显示特定消息
- 重置时将时间恢复初始值并重新开始倒计时
扩展功能
要增加更多控制功能，可以添加暂停和继续按钮：
let isPaused = false;
const pauseButton = document.getElementById('pauseButton');
pauseButton.addEventListener('click', () => {
if (isPaused) {
countdown = setInterval(updateCountdown, 1000);
pauseButton.textContent = '暂停';
} else {
clearInterval(countdown);
pauseButton.textContent = '继续';
}
isPaused = !isPaused;
});对应的HTML：
<button id="pauseButton">暂停</button>
