如何在呼吸训练计时器切换标签时将计数器重置为1？

问题描述 #

需要实现的呼吸训练节奏：

• 8秒吸气（计数1-8）
• 8秒屏息（吸气后，计数1-8）
• 12秒呼气（计数1-12）
• 8秒屏息（呼气后，计数1-8）

当前代码能完成阶段切换，但计数器不会在每个阶段开始时重置为1，而是持续累加，不符合预期。

修改后的代码 #

HTML #

<h1>呼吸训练计时器</h1>
<p id="timer"></p>
<p id="label"></p>

CSS #

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

JavaScript #

// 定义呼吸阶段配置：每个阶段的名称和时长
const phases = [
  { name: '吸气', duration: 8 },
  { name: '屏息（吸气后）', duration: 8 },
  { name: '呼气', duration: 12 },
  { name: '屏息（呼气后）', duration: 8 }
];

function startTimer() {
  const timer = document.getElementById('timer');
  const label = document.getElementById('label');
  let currentPhaseIndex = 0;
  let currentCount = 1;

  const interval = setInterval(() => {
    const currentPhase = phases[currentPhaseIndex];
    // 更新显示当前阶段的计数和名称
    timer.textContent = currentCount;
    label.textContent = currentPhase.name;

    currentCount++;

    // 当前阶段结束，切换到下一阶段
    if (currentCount > currentPhase.duration) {
      currentPhaseIndex++;
      // 所有阶段完成后重置到第一个阶段
      if (currentPhaseIndex >= phases.length) {
        currentPhaseIndex = 0;
      }
      currentCount = 1; // 重置计数为1
    }
  }, 1000);
}

// 初始化启动计时器
startTimer();

改动说明 #

1. 阶段配置化：用数组phases定义每个阶段的名称和时长，后续调整节奏只需修改数组内容，更易维护。
2. 分离全局计数与阶段计数：用currentPhaseIndex追踪当前所处阶段，currentCount仅记录当前阶段内的计数，每个阶段结束后自动重置为1。
3. 循环逻辑优化：所有阶段执行完成后自动回到第一个阶段，实现呼吸训练的无限循环。

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