实现分段计数的JavaScript定时器：呼吸练习应用-js教程-PHP中文网

实现分段计数的JavaScript定时器：呼吸练习应用

本文详细介绍了如何使用JavaScript实现一个分段计数的定时器，特别适用于呼吸练习等需要按阶段重置计数的场景。通过引入两个独立的计数器变量，一个用于跟踪整个循环的进度，另一个用于管理当前阶段的计数，我们能够确保在每个阶段切换时，内部计数器都能准确地从1开始重新计时，从而提供清晰的用户反馈和专业的教程体验。

在开发交互式web应用时，我们经常需要创建各种定时器。对于一些特定的应用场景，例如呼吸练习、健身指导或分步教程，计时器不仅需要显示总时长，更重要的是要能够为每个独立的阶段（如“吸气”、“屏息”、“呼气”）提供一个从1开始重新计数的计时体验。传统的单变量计时器往往难以满足这种需求，因为它会持续递增，而不是在阶段切换时重置。

问题分析：传统计时器的局限性

考虑一个呼吸练习应用，其流程如下：

8秒吸气
8秒屏息（吸气后）
12秒呼气
8秒屏息（呼气后）

如果使用一个单一的计数器变量 count 来跟踪时间并更新显示，当阶段从“吸气”切换到“屏息”时，计时器会从9开始显示，而不是从1开始。这与用户期望的“当前阶段已进行X秒”的体验不符。

例如，原始的JavaScript代码可能如下所示：

// 原始的计时器函数示例
function startTimerOriginal() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');
  var count = 1; // 单一计数器

  var interval = setInterval(function() {
    timer.textContent = count; // 直接显示总计数

    if (count <= 8) {
      label.textContent = 'Inhale';
    } else if (count <= 16) { // 当count > 8时，计时器会显示9, 10...
      label.textContent = 'Pause Inhale';
    } else if (count <= 28) {
      label.textContent = 'Exhale';
    } else if (count <= 36) {
      label.textContent = 'Pause Exhale';
    }

    count++;

    if (count === 45) { // 总计 8+8+12+8 = 36秒，循环总长为36秒，所以count到37时需要重置，如果从1开始，则到37时结束
      clearInterval(interval);
      startTimerOriginal(); // 循环调用
    }
  }, 1000);
}

登录后复制

这段代码的问题在于，timer.textContent 始终显示 count 的值，而 count 是一个持续递增的全局计时器。当 label.textContent 从 'Inhale' 变为 'Pause Inhale' 时，count 已经大于8，因此显示给用户的数字会从9开始，而非期望的1。

立即学习“Java免费学习笔记（深入）”；

解决方案：引入分段计数器

要解决这个问题，我们需要引入两个独立的计数器变量：

count (总循环计数器): 负责跟踪整个呼吸循环的总体进度。它会持续递增，用于判断何时切换呼吸阶段。
segcount (分段计数器): 负责跟踪当前呼吸阶段内部的进度。当呼吸阶段切换时，它会被重置为1，从而实现每个阶段的独立计数。

实现步骤

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

1. HTML 结构

首先，定义一个简单的HTML结构来显示计时器数字和当前的呼吸阶段标签。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>呼吸练习定时器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>呼吸练习</h1>
    <p id="timer"></p>
    <p id="label"></p>

    <script src="script.js"></script>
</body>
</html>

登录后复制

这里，<h1> 提供标题，<p id="timer"></p> 用于显示当前阶段的计数，<p id="label"></p> 用于显示当前的呼吸阶段（如“吸气”）。

2. CSS 样式

为了使界面更具可读性和居中显示，我们可以添加一些基本的CSS样式。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

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: 2.5em; /* 增大标题 */
  font-weight: bold;
  margin-bottom: 20px;
  color: #007bff;
}

p {
  font-size: 2em; /* 增大段落文字 */
  margin: 10px 0;
}

#timer {
  font-size: 4em; /* 特别增大计时器数字 */
  font-weight: bold;
  color: #28a745; /* 绿色 */
}

#label {
  font-size: 2.5em; /* 增大标签文字 */
  color: #6c757d;
}

登录后复制

3. JavaScript 逻辑

这是核心部分。我们将修改 startTimer 函数，引入 segcount 并管理其重置逻辑。

// Function to start the timer
function startTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');

  // 初始化标签为“吸气”，确保首次显示正确
  label.textContent = '吸气'; 

  var count = 1;      // 总循环计数器，用于判断阶段切换
  var segcount = 1;   // 分段计数器，用于显示当前阶段的秒数

  // Interval for the timer
  var interval = setInterval(function() {
    // 更新计时器显示为当前阶段的计数
    timer.textContent = segcount;

    // 根据总循环计数器判断并切换阶段
    // 注意：这里的判断条件是当 'count' 达到阶段结束时，才更新标签并重置 segcount
    if (count === 8) { // 吸气阶段结束
      label.textContent = '屏息 (吸气后)';
      segcount = 0; // 重置分段计数器，因为它会在下一行递增到1
    } else if (count === 16) { // 屏息 (吸气后) 阶段结束 (8 + 8 = 16)
      label.textContent = '呼气';
      segcount = 0;
    } else if (count === 28) { // 呼气阶段结束 (16 + 12 = 28)
      label.textContent = '屏息 (呼气后)';
      segcount = 0;
    }

    // 递增两个计数器
    count++;
    segcount++;

    // 整个循环结束的条件
    // 总时长：8(吸气) + 8(屏息) + 12(呼气) + 8(屏息) = 36秒
    // 如果count从1开始，则在第37次迭代时（即36秒结束后）停止并重新开始
    if (count === 37) { 
      clearInterval(interval); // 清除当前定时器
      startTimer();            // 重新开始整个循环
    }
  }, 1000); // 1000毫秒 = 1秒
}

// Start the timer initially
startTimer();

登录后复制

代码解析：

label.textContent = '吸气';: 在计时器开始前，将标签初始化为第一个阶段，确保用户立即看到正确的指示。
var count = 1;: 这是全局计数器，从1开始，用于跟踪整个36秒循环的进度。
var segcount = 1;: 这是分段计数器，也从1开始，用于显示当前阶段的秒数。
timer.textContent = segcount;: 关键在于这里，显示的是 segcount 而不是 count。
阶段切换逻辑:
- 当 count 达到 8 时（意味着“吸气”阶段的第8秒结束），我们将 label 更新为 '屏息 (吸气后)'，并将 segcount 重置为 0。由于紧接着会执行 segcount++，所以下一秒 segcount 将变为 1，完美实现了从1开始计数。
- 此逻辑同样适用于 count 达到 16 和 28 的情况。
循环重置: 当 count 达到 37 时（表示36秒的循环已经完成），clearInterval(interval) 停止当前定时器，然后 startTimer() 再次调用自身，实现无限循环。

完整代码示例

将上述HTML、CSS和JavaScript代码分别保存为 index.html, style.css 和 script.js，并在同一个目录下。

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>呼吸练习定时器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>呼吸练习</h1>
    <p id="timer"></p>
    <p id="label"></p>

    <script src="script.js"></script>
</body>
</html>

登录后复制

style.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: 2.5em;
  font-weight: bold;
  margin-bottom: 20px;
  color: #007bff;
}

p {
  font-size: 2em;
  margin: 10px 0;
}

#timer {
  font-size: 4em;
  font-weight: bold;
  color: #28a745;
}

#label {
  font-size: 2.5em;
  color: #6c757d;
}

登录后复制

script.js

// Function to start the timer
function startTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');

  label.textContent = '吸气'; 

  var count = 1;      // 总循环计数器
  var segcount = 1;   // 分段计数器

  var interval = setInterval(function() {
    timer.textContent = segcount;

    if (count === 8) { 
      label.textContent = '屏息 (吸气后)';
      segcount = 0; 
    } else if (count === 16) { 
      label.textContent = '呼气';
      segcount = 0;
    } else if (count === 28) { 
      label.textContent = '屏息 (呼气后)';
      segcount = 0;
    }

    count++;
    segcount++;

    if (count === 37) { 
      clearInterval(interval); 
      startTimer();            
    }
  }, 1000); 
}

// Start the timer initially
startTimer();

登录后复制

注意事项与改进

代码可读性与维护性: 当前的阶段切换逻辑是硬编码的 if-else if 结构。如果呼吸阶段很多或者需要动态配置，这种方式会变得难以维护。可以考虑使用一个数组来定义呼吸阶段，每个元素包含 label 和 duration。
```
const phases = [
  { label: '吸气', duration: 8 },
  { label: '屏息 (吸气后)', duration: 8 },
  { label: '呼气', duration: 12 },
  { label: '屏息 (呼气后)', duration: 8 }
];
let currentPhaseIndex = 0;
let totalDuration = 0; // 用于计算总时长
phases.forEach(p => totalDuration += p.duration);
```
登录后复制
然后，在 setInterval 内部，根据 count 和 phases 数组来确定当前阶段和何时切换。
用户体验: 可以添加开始/暂停/重置按钮，提供更灵活的控制。
精确度: setInterval 并非绝对精确，尤其是在浏览器标签页不活跃时。对于需要极高精度的计时器，可能需要考虑使用 requestAnimationFrame 或其他更高级的计时机制，但这对于大多数Web应用来说通常不是必需的。
错误处理: 确保 timer 和 label 元素在DOM中存在，避免 null 引用错误。

总结

通过引入一个额外的分段计数器 segcount，我们成功地解决了在多阶段计时器中，每个阶段计数需要从1开始重置的问题。这种方法不仅使计时器逻辑更清晰，也大大提升了用户体验，尤其适用于需要精确指导用户按阶段操作的应用场景。此模式具有良好的可扩展性，通过进一步的抽象，可以轻松适应更复杂的阶段定义和控制需求。

以上就是实现分段计数的JavaScript定时器：呼吸练习应用的详细内容，更多请关注php中文网其它相关文章！