本文详细介绍了如何构建一个JavaScript呼吸练习计时器，并解决其计数器在不同呼吸阶段（吸气、屏息、呼气）之间无法自动重置的问题。通过引入两个独立的计数器——一个用于跟踪整个循环，另一个用于当前阶段的计数——实现了每当呼吸阶段切换时，阶段计数器都能从1开始重新计数，从而提供更直观的用户体验。
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 timerfunction 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代码整合到一起，即可运行一个功能完善的呼吸练习计时器。
呼吸练习计时器 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; }呼吸练习计时器
// Function to
以上就是JavaScript分段计时器实现：呼吸练习计数器按阶段重置的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528561.html
微信扫一扫 
支付宝扫一扫 
