时序计时器：一个只管「分段计时」的网页工具

时序计时器（EigenTime Timer）是我在 eigentime.org 做的一个网页计时器，地址是 timer.eigentime.org。它只做一件事：把「准备 → 进行 → 间歇 → 收尾」这样的阶段排成一条流程，然后按顺序跑完。

这篇文章讲讲它为什么是现在这个样子，能做什么，以及有哪些做不到的地方。文末有一节写给想把它嵌进自己网页的开发者。

不为某一种活动而做

很多需要计时的事情，拆开来看结构都差不多：先准备，然后做一段、歇一段，重复几轮，最后收尾。间歇训练是这样，拉伸、按节奏呼吸、番茄钟的专注时段也是这样。

所以计时引擎本身不认识任何具体活动，只理解两样东西：阶段和循环。HIIT、Tabata、拉伸、呼吸节奏、番茄钟，对它来说都只是一份写好的计时配置，也就是「模板」。一件事只要能拆成分段计时，就能用它来排。

编排一条流程

流程由阶段和循环组成，循环里还能再套循环，最多五层。「三组训练与休息、一次长休息，再整体重复一遍」就是两层循环，内置的番茄钟模板也是这样排的。

阶段分五种类型：开始前、进行、间歇、收尾、其他。类型只决定颜色和提示音，不影响计时。新建阶段会按类型配好提示音，比如进行用 beep、间歇用双 beep，开始前、进行、间歇这三类还会在最后 3 秒倒数；改了类型，提示音也跟着换。每个阶段还可以写一条说明（每种语言最多 280 字），运行时显示在圆环下方，阶段切换时也会被读屏软件一并读出，适合写动作要点，或者提醒自己这一段要做什么。

编辑器的手感参考了 iOS 自带的时钟和计时器。每个阶段是几行「标签在左、值在右」的列表：名称、类型、时长、说明。时长平时显示成一个时间胶囊，点开后就地展开「小时 · 分钟 · 秒」三列滚轮，手指、触控板、鼠标滚轮都能滚。滚轮停稳后才保存，一次快速滑动只算一步撤销。不想滚的话，用方向键、PageUp / PageDown 调，或者直接键入数字也行。循环的重复次数可以直接输入，也可以用旁边的「− | +」胶囊加减，范围是 1 到 999 次；循环标题上会显示每轮多长、一共多长。

调整顺序可以拖动卡片标题行右侧的手柄，鼠标和触摸都行，也可以聚焦手柄后按上下方向键。上移、下移、复制、包成循环这些不常用的操作收在「更多操作」菜单里。改错了可以随时撤销、重做。

还有一条规则我比较在意：编辑器不会交出跑不起来的流程。时长为 0 这类错误会标红，「开始」按钮同时禁用，改好之前没法运行。

运行起来是什么样

运行时，屏幕中间是大号的倒计时数字，外面围着一个圆环。这个圆环就是整条流程：每个阶段一段圆弧，长短按时长、颜色按类型。走过的阶段是实色，当前阶段的弧线随时间逐渐填满，还没到的是淡色。不用读字，扫一眼就知道走到了哪里。首页模板卡片上的色条、页脚里那个 Tabata 圆环，用的也是同一种画法，而且都是由真实的流程算出来的。

圆环下方写着第几轮、本轮还剩多久、已用和总时长，以及下一阶段的名称和时长。

按钮布局也照着 iOS 计时器：左边是圆形的「重置」，右边是圆形的「开始 / 暂停 / 继续」，中间是上一阶段和下一阶段。另外有音量、静音和全屏；不支持原生全屏的浏览器（比如 iPhone 上），会改成铺满窗口的布局。

计时按截止时间来算：流逝时间等于当前时刻减去一个锚点，而不是一秒一秒往下减。这样即使浏览器在后台给页面节流，误差也不会越积越多。

运行期间，只要浏览器支持，它会尽量让屏幕保持常亮。但网页毕竟不是系统闹钟，切到后台的标签页里，提示音可能不会响。所以在本站上，你一离开页面，计时就会自动暂停并说明原因；回来以后由你自己点继续，而不是悄悄从半路接着跑。我宁可如实说明网页能做到哪一步，也不想把它假装成闹钟。

七个内置模板

• 基础间隔：训练 30 秒、休息 30 秒，共 5 轮。
• Tabata：20 秒训练、10 秒休息，共 8 轮，前面有 10 秒准备，最后 1 分钟放松。
• 拉伸：左侧 30 秒、换边 5 秒、右侧 30 秒、休息 15 秒，共 4 组。
• 呼吸节奏：吸气 4 秒、屏息 7 秒、呼气 8 秒，共 8 个循环，仅作为节奏工具。
• 盆底肌示例：收缩 5 秒、放松 10 秒，共 10 组，时长只是随意设定的示例。
• 番茄钟：4 个「专注 25 分钟 + 短休息 5 分钟」，再加 15 分钟长休息，整体重复两个周期，全程四个半小时。
• 说话音量练习：10 分钟、7 个阶段，每个阶段附一句要做什么的说明。本站不测量音量，也不录音。

每个模板都有自己的介绍页，列出全部阶段，可以直接运行，也可以在编辑器里打开，改成自己的版本。打开模板得到的是一份副本，模板本身不会被改动。这些模板只是计时配置的示例，本工具不构成医疗或训练建议。

流程只存在你的浏览器里

不用注册，也没有账号。一切都在浏览器里运行，服务器不保存你的流程。

每次修改都会自动存进这个浏览器的「我的流程」，删错了可以撤销。不过「只存在本机」也意味着几件事：清除网站数据会把流程一起删掉；Safari 和添加到主屏幕的应用各用各的存储，Safari 还可能清理长期没访问的网站数据；无痕模式下，修改只保留到页面关闭。所以「我的流程」里放了「备份全部」，一键导出成一个文件，并显示上次备份的时间。换设备时，在另一边导入这个文件就行，单个流程和整份备份都能导入。

想把流程发给别人，就用分享链接。整条流程直接编码在链接里，服务器同样不保存。对方打开后先看到预览，确认了才会导入，而且绝不会覆盖他已有的记录。流程太长（比如说明写得很多）时，链接会超出长度上限，这时会提示你改用导出文件来分享。

本站使用 Cloudflare Web Analytics 统计访问量和加载速度。它不使用 Cookie，只上报页面路径和性能数据，收不到你的流程，也收不到你的分享链接。

一些细节

• 联网打开过一次之后就能离线使用，内置模板和已保存的流程照样能编辑、运行、导入导出。也可以「添加到主屏幕」，像 App 一样安装。
• 有新版本时，它会在后台等着，不会自己刷新页面；计时运行或暂停期间不能更新，等计时结束再点「更新」。
• 中英双语，有浅色、深色和跟随系统三种主题。
• 所有功能都能只用键盘完成；图标按钮都有可读的名称；阶段切换会以不打断的方式朗读出来。

给开发者：把它嵌进你的网页

播放器和编辑器是两个独立的 Web Components：<sequence-timer-player> 和 <sequence-timer-builder>。不需要框架，也不需要构建工具，导入一个模块就能用：

<sequence-timer-player locale="zh-CN"></sequence-timer-player>
<script type="module">
  import 'https://timer.eigentime.org/embed/v1/player.js';
  document.querySelector('sequence-timer-player').sequence = {
    schemaVersion: 1,
    id: 'my-timer',
    metadata: { name: { 'zh-CN': '我的计时器' } },
    children: [
      { type: 'phase', id: 'prepare', role: 'prepare', durationMs: 5000 },
      {
        type: 'group', id: 'round', repeat: 4,
        children: [
          { type: 'phase', id: 'work', role: 'work', durationMs: 30000,
            cues: { start: 'beep', countdownSeconds: 3 } },
          { type: 'phase', id: 'rest', role: 'rest', durationMs: 10000 },
        ],
      },
    ],
  };
</script>

下面这个播放器按这段代码的写法嵌进了本页，流程完全相同，点「开始」可以直接试：

模块允许跨站加载，也可以自托管。只导入 player.js 不会加载编辑器；需要编辑器时再导入 builder.js，它的 start 事件会交出一份已经通过校验的流程。计时要等访客自己点「开始」，这样浏览器才允许播放提示音。

核心引擎不依赖 DOM，也不依赖任何框架。所有外部输入，包括分享链接、导入的 JSON、宿主页面传入的属性和编辑器的输出，都经过同一个校验器，并有结构上限：最多 500 个节点，单个阶段和总时长都不超过 24 小时。

嵌入的组件不自动保存、不读取本站的偏好设置、不安装离线缓存，也不发送统计；要不要保存、怎么分享，由你的页面决定。你可以监听 statechange、phasechange、cue、complete 事件来驱动自己的界面。外观可以用 --sequence-primary、--sequence-work 这类 CSS 变量定制，不用去碰 Shadow DOM。

播放器底部默认有一行「由时序计时器提供支持」的小链接，点击之前不会发出任何请求。上面的演示保留了这行链接，也就是嵌入后的默认样子；不想显示的话，加上 no-attribution 属性：

<sequence-timer-player locale="zh-CN" no-attribution></sequence-timer-player>

完整示例和自托管方法见嵌入文档。

最后

时序计时器完全免费，没有广告。如果它帮你省了时间，可以自愿支持一下，但这从来不是使用它的前提。

打开 timer.eigentime.org，先挑一个模板跑一遍，或者从空白开始，排一条你自己的流程。

写作说明：Claude Opus 5.5 起草，对照项目代码改写并加入嵌入演示；作者决定发布。