Animated Counter new 动态数字计数器 Animated Counter web
A value that counts to a new number so the change is easy to notice
用短暂计数过程让数值变化更容易被注意到
标本可交互，可以直接操作。
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Settled value稳定值
aria-liveThe formatted number users ultimately need to read and act on.
用户最终需要读取和据此行动的格式化数字。
Prompt fragmentPrompt 片段a single live region containing only the final formatted value after the tween settles
动画结束后只在一个 live region 中放置最终格式化数字
-
2 Digit track数字轨道
tabular-numsThe aligned visual digits that move during the transition.
过渡期间移动并保持对齐的视觉数字。
Prompt fragmentPrompt 片段right-aligned tabular numerals with stable width while each digit changes
使用等宽数字右对齐，每位变化时保持稳定宽度
-
3 Value trigger数值触发器
state updateThe event or data update that starts a new count.
启动新一轮计数的事件或数据更新。
Prompt fragmentPrompt 片段a clearly labelled update action that supplies the previous and next numeric values
一个有明确标签的更新操作，提供旧值和新值
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Build an animated counter that transitions from the previous value to the next with a 450ms ease-out. Keep digits aligned with tabular numerals, format currency and separators without layout jumps, expose only the settled value to aria-live, cancel an in-flight tween when the value changes again, and render the final value immediately for prefers-reduced-motion.
构建一个动态数字计数器，用 450ms 的 ease-out 从旧值过渡到新值。使用等宽数字保持对齐；格式化货币和分隔符时不让布局跳动；aria-live 只暴露稳定后的值；值再次变化时取消正在进行的补间；在 prefers-reduced-motion 下立即渲染最终值。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my animated counter. Check that numeric formatting does not change width; the animation cancels cleanly on a new value; requestAnimationFrame is not left running offscreen; screen readers do not hear every intermediate number; a decrease animates as deliberately as an increase; NaN and missing values have a clear fallback; and reduced-motion renders the settled value immediately. The symptom:
调试我的动态数字计数器。检查：数字格式变化是否影响宽度；新值到来时动画是否干净取消；元素离屏时 requestAnimationFrame 是否停止；屏幕阅读器是否不会听到每个中间数字；数字减少时是否同样有明确动画；NaN 和缺失值是否有清晰兜底；reduced-motion 是否立即显示稳定值。症状：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| JS | requestAnimationFrame | tween the value with a bounded frame loop用有边界的帧循环补间数字 |
| CSS | font-variant-numeric: tabular-nums | stop changing digits from shifting the metric让变化中的数字保持对齐，不推动指标布局 |
| ARIA | aria-live="polite" | announce the settled value, not every frame只播报最终稳定值，不播报每一帧 |
| Motion | prefers-reduced-motion | jump to the final value when motion is reduced减少动态效果时直接跳到最终值 |