如何实现按空格键切换计时器启停？现有代码问题求助

问题根源 #

• 重复绑定了keydown事件，两次监听空格键会导致逻辑冲突，触发时机混乱
• keyPressed变量的逻辑错误，初始值为false时第一次按空格键无法触发任何操作；且该变量完全冗余，现有的paused状态已经足够判断当前需要执行启动还是停止操作

修正后的代码 #

JavaScript 部分

const timeDisplay = document.querySelector("#timeDisplay");
const startBtn = document.querySelector("#startBtn");
const pauseBtn = document.querySelector("#pauseBtn");
const resetBtn = document.querySelector("#resetBtn");

let startTime = 0;
let elapsedTime = 0;
let currentTime = 0;
let paused = true;
let intervalId;
let hrs = 0;
let mins = 0;
let secs = 0;

// 合并为单个空格键监听事件
document.addEventListener('keydown', function(event) {
  if (event.code === 'Space') {
    event.preventDefault(); // 防止页面滚动干扰
    if (paused) {
      // 当前暂停，执行启动逻辑
      paused = false;
      startTime = Date.now() - elapsedTime;
      intervalId = setInterval(updateTime, 1000);
    } else {
      // 当前运行，执行暂停逻辑
      paused = true;
      elapsedTime = Date.now() - startTime;
      clearInterval(intervalId);
    }
  }
});

startBtn.addEventListener("click", () => {
  if (paused) {
    paused = false;
    startTime = Date.now() - elapsedTime;
    intervalId = setInterval(updateTime, 1000);
  }
});

pauseBtn.addEventListener("click", () => {
  if (!paused) {
    paused = true;
    elapsedTime = Date.now() - startTime;
    clearInterval(intervalId);
  }
});

resetBtn.addEventListener("click", () => {
  paused = true;
  clearInterval(intervalId);
  startTime = 0;
  elapsedTime = 0;
  currentTime = 0;
  hrs = 0;
  mins = 0;
  secs = 0;
  timeDisplay.textContent = "00:00:00";
});

function updateTime() {
  elapsedTime = Date.now() - startTime;

  secs = Math.floor((elapsedTime / 1000) % 60);
  mins = Math.floor((elapsedTime / (1000 * 60)) % 60);
  hrs = Math.floor((elapsedTime / (1000 * 60 * 60)) % 60);

  secs = pad(secs);
  mins = pad(mins);
  hrs = pad(hrs);

  timeDisplay.textContent = `${hrs}:${mins}:${secs}`;

  function pad(unit) {
    return (("0") + unit).length > 2 ? unit : "0" + unit;
  }
}

HTML 部分（无需修改）

<span id="timeDisplay"></span><br />
<button type="button" id="startBtn">Start</button>
<button type="button" id="pauseBtn">Pause</button>
<button type="button" id="resetBtn">Reset</button>

修改关键点 #

1. 合并事件监听器：将两个独立的keydown监听合并为一个，避免逻辑冲突
2. 移除冗余变量：删除keyPressed，直接用paused状态判断操作，逻辑更清晰
3. 添加默认行为阻止：在空格键事件中加入event.preventDefault()，防止按下空格时页面滚动干扰计时器操作
4. 同步状态逻辑：确保空格键操作和按钮点击的逻辑完全一致，状态保持同步

内容的提问来源于stack exchange，提问作者Maxviz