JavaScript分段计时器实现：呼吸练习计数器按阶段重置-js教程-PHP中文网

javascript分段计时器实现：呼吸练习计数器按阶段重置

本文详细介绍了如何构建一个JavaScript呼吸练习计时器，并解决其计数器在不同呼吸阶段（吸气、屏息、呼气）之间无法自动重置的问题。通过引入两个独立的计数器——一个用于跟踪整个循环，另一个用于当前阶段的计数——实现了每当呼吸阶段切换时，阶段计数器都能从1开始重新计数，从而提供更直观的用户体验。

1. 理解分段计时的需求

在开发一个如呼吸练习般的计时器时，我们常常需要按照特定的时间段来执行不同的操作，并显示相应的计数。例如，一个典型的呼吸练习可能包含以下阶段：

吸气 (Inhale): 8秒
屏息 (Hold Inhale): 8秒
呼气 (Exhale): 12秒
屏息 (Hold Exhale): 8秒

一个完整的呼吸周期总时长为 8 + 8 + 12 + 8 = 36 秒。

最初的实现尝试使用一个单一的计数器来跟踪整个周期，并根据计数器的值来更新阶段标签。然而，这种方法会导致一个问题：当阶段标签改变时，计数器会继续递增，而不是从1重新开始为当前阶段计数。例如，吸气阶段从1数到8后，屏息阶段的计数会从9开始，而非期望的从1开始。

2. 核心解决方案：双计数器策略

为了解决上述问题，我们需要引入一个“双计数器”策略：

总周期计数器 (count): 用于跟踪整个呼吸练习的进度，从1开始，一直递增直到一个完整的周期结束。这个计数器决定了何时切换呼吸阶段的标签。
当前阶段计数器 (segcount): 用于跟踪当前呼吸阶段内的秒数，从1开始，并在每个新阶段开始时重置为1。这个计数器是用户在界面上看到的实时秒数。

当 count 达到某个阶段的结束点时，我们不仅更新 label.textContent 来显示新的呼吸阶段，还需要将 segcount 重置，以便它能从1开始为新的阶段计数。

3. 实现步骤与代码解析

我们将通过HTML、CSS和JavaScript来构建这个计时器。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

3.1 HTML 结构

HTML部分非常简洁，只需要两个段落元素来显示计时器的秒数和当前的呼吸阶段标签。

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

：文章标题。
：显示当前阶段的秒数。
：显示当前的呼吸阶段（如“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代码整合到一起，即可运行一个功能完善的呼吸练习计时器。




    <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>呼吸练习计时器</title><style>
        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;
        }
    </style><h1>呼吸练习计时器</h1>
    <p id="timer"></p>
    <p id="label"></p>

    <script>
        // Function to</script>