1. 理解分段计时的需求
在开发一个如呼吸练习般的计时器时，我们常常需要按照特定的时间段来执行不同的操作，并显示相应的计数。例如，一个典型的呼吸练习可能包含以下阶段：
- 吸气 (Inhale): 8秒
- 屏息 (Hold Inhale): 8秒
- 呼气 (Exhale): 12秒
- 屏息 (Hold Exhale): 8秒
一个完整的呼吸周期总时长为 8 + 8 + 12 + 8 = 36 秒。
最初的实现尝试使用一个单一的计数器来跟踪整个周期，并根据计数器的值来更新阶段标签。然而，这种方法会导致一个问题：当阶段标签改变时，计数器会继续递增，而不是从1重新开始为当前阶段计数。例如，吸气阶段从1数到8后，屏息阶段的计数会从9开始，而非期望的从1开始。
2. 核心解决方案：双计数器策略
为了解决上述问题，我们需要引入一个“双计数器”策略：
立即学习“Java免费学习笔记（深入）”；
- 总周期计数器 (count): 用于跟踪整个呼吸练习的进度，从1开始，一直递增直到一个完整的周期结束。这个计数器决定了何时切换呼吸阶段的标签。
- 当前阶段计数器 (segcount): 用于跟踪当前呼吸阶段内的秒数，从1开始，并在每个新阶段开始时重置为1。这个计数器是用户在界面上看到的实时秒数。
当 count 达到某个阶段的结束点时，我们不仅更新 label.textContent 来显示新的呼吸阶段，还需要将 segcount 重置，以便它能从1开始为新的阶段计数。
3. 实现步骤与代码解析
我们将通过HTML、CSS和JavaScript来构建这个计时器。
3.1 HTML 结构
HTML部分非常简洁，只需要两个段落元素来显示计时器的秒数和当前的呼吸阶段标签。
呼吸练习计时器
：文章标题。
：显示当前阶段的秒数。
：显示当前的呼吸阶段（如“Inhale”）。
3.2 CSS 样式
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;
background-color: #f0f0f0;
color: #333;
}
h1 {
font-size: 2em;
font-weight: bold;
margin-bottom: 20px;
color: #0056b3;
}
p {
font-size: 1.5em;
margin: 10px 0;
}
#timer {
font-size: 3em;
font-weight: bold;
color: #28a745;
}
#label {
font-size: 2em;
color: #6c757d;
}3.3 JavaScript 逻辑
核心逻辑位于 startTimer() 函数中，它负责初始化计时器、更新显示以及处理阶段切换。
// Function to start the timer
function startTimer() {
// 获取HTML元素
var timerDisplay = document.getElementById('timer');
var labelDisplay = document.getElementById('label');
// 初始化标签为“吸气”
labelDisplay.textContent = 'Inhale';
// 初始化总周期计数器和当前阶段计数器
var totalCycleCount = 1; // 跟踪整个36秒周期的进度
var segmentCount = 1; // 跟踪当前呼吸阶段内的秒数
// 设置计时器，每秒执行一次
var interval = setInterval(function() {
// 更新显示当前阶段的秒数
timerDisplay.textContent = segmentCount;
// 根据总周期计数器判断当前阶段并更新标签和重置阶段计数器
if (totalCycleCount === 8) { // 吸气阶段结束 (8秒)
labelDisplay.textContent = 'Pause Inhale'; // 切换到屏息
segmentCount = 0; // 重置阶段计数器，下一秒将变为1
} else if (totalCycleCount === 16) { // 第一次屏息阶段结束 (8+8=16秒)
labelDisplay.textContent = 'Exhale'; // 切换到呼气
segmentCount = 0;
} else if (totalCycleCount === 28) { // 呼气阶段结束 (16+12=28秒)
labelDisplay.textContent = 'Pause Exhale'; // 切换到第二次屏息
segmentCount = 0;
} else if (totalCycleCount === 36) { // 第二次屏息阶段结束 (28+8=36秒)
// 整个周期结束，准备下一个周期的标签和计数
labelDisplay.textContent = 'Inhale'; // 准备下一个周期的吸气
segmentCount = 0;
}
// 递增两个计数器
totalCycleCount++;
segmentCount++;
// 检查是否完成一个完整的36秒周期，如果是则重置并重新开始计时
if (totalCycleCount === 37) { // 36秒结束后，totalCycleCount会变为37
clearInterval(interval); // 清除当前计时器
startTimer(); // 重新开始整个计时过程，实现循环
}
}, 1000); // 1000毫秒 = 1秒
}
// 页面加载后立即启动计时器
startTimer();代码解析：
- timerDisplay 和 labelDisplay: 获取HTML元素，用于更新显示。
- labelDisplay.textContent = 'Inhale';: 初始化时，将标签设置为“Inhale”。
- totalCycleCount: 整个周期计数器，从1开始递增。
- segmentCount: 当前阶段计数器，从1开始递增，并在阶段切换时重置为0（因为紧接着会 segmentCount++，使其在下一秒变为1）。
- setInterval(function() {...}, 1000): 每1000毫秒（1秒）执行一次内部函数。
- timerDisplay.textContent = segmentCount;: 每次更新显示当前阶段的秒数。
-
if/else if 结构: 根据 totalCycleCount 的值判断当前所处的阶段：
- 当 totalCycleCount 达到阶段结束的秒数时（例如8秒、16秒、28秒、36秒），更新 labelDisplay 到下一个阶段的名称。
- 同时，将 segmentCount 重置为 0。由于紧接着会执行 segmentCount++，所以在下一秒开始时，segmentCount 将变为 1，实现了阶段内从1开始计数。
- totalCycleCount++ 和 segmentCount++: 每次循环都递增两个计数器。
- if (totalCycleCount === 37): 当 totalCycleCount 达到37时，表示一个36秒的周期已经完成（从1数到36，然后变为37）。此时，清除当前的 interval 并重新调用 startTimer()，实现计时器的无限循环。
4. 完整代码示例
将上述HTML、CSS和JavaScript代码整合到一起，即可运行一个功能完善的呼吸练习计时器。
呼吸练习计时器
呼吸练习计时器
