Pomodoro Clock项目计时器归0后Break Session功能失效求助

问题根源 #

当前代码仅实现了单次工作Session的倒计时逻辑，未加入工作/休息状态的切换判断，倒计时归0后直接清空定时器终止运行，无法触发Break Session执行。

修复方案 #

直接按以下步骤修改JS代码即可：

1. 新增3个全局变量，用来标记当前状态、调用提示音、修改计时标签：

let isSession = true;
const beepAudio = document.getElementById('beep');
const timerLabel = document.querySelector('#timer-label p');

2. 修改默认定时器初始化逻辑，取消页面加载自动计时的默认行为，符合番茄钟常规交互：

// 把原来的 let interval = setInterval(updateCountdown, 1000); 替换为下面的代码
let interval = null;

3. 改造updateCountdown函数的归零逻辑，增加状态切换：

function updateCountdown() {
  const minutesLeft = Math.floor(time / 60);
  let secondsLeft = time % 60;
  
  if (minutesLeft === 0 && secondsLeft === 0) {
    // 播放提示音
    beepAudio.currentTime = 0;
    beepAudio.play().catch(err => console.log('音频播放失败：', err));
    // 切换工作/休息状态
    isSession = !isSession;
    if (isSession) {
      time = startingMinutes * 60;
      timerLabel.innerText = 'Session';
    } else {
      time = breakPlease * 60;
      timerLabel.innerText = 'Break';
    }
  }
  
  secondsLeft = secondsLeft < 10 ? '0' + secondsLeft : secondsLeft;
  // 去掉了原代码里分钟和秒之间多余的空格
  countdownEl.innerHTML = `${minutesLeft}:${secondsLeft}`;
  time--;
}

4. 完善resetTime函数，同步重置所有状态和显示：

function resetTime() {
  console.log('rT clicked')
  // 清空当前运行的定时器
  clearInterval(interval);
  interval = null;
  // 重置所有参数
  startingMinutes = 25;
  breakPlease = 5;
  isSession = true;
  time = startingMinutes * 60;
  // 重置页面显示
  document.getElementById('timeItself').innerHTML = startingMinutes;
  document.getElementById('breakPlease').innerHTML = breakPlease;
  timerLabel.innerText = 'Session';
  beepAudio.pause();
  beepAudio.currentTime = 0;
  updateCountdown();
}

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