纯CSS无法实现数字动态滚动，必须用JavaScript配合requestAnimationFrame控制数值演进，结合IntersectionObserver触发及正则提取纯数字，确保平滑、精准、低开销。
纯 CSS 无法实现真正意义上的数字动态滚动变化——比如从 0 平滑滚到 12345，它只能做固定帧位移动画，不能按需计算中间值、也不能响应数据变更。必须用 JavaScript 控制数值演进节奏，再交由 CSS 处理视觉滚动位移。
用 requestAnimationFrame 替代 setInterval 做平滑增长
直接用 setInterval 累加数字，容易在页面失焦、低帧率设备或后台标签页中跳值、卡顿甚至提前结束动画。而 requestAnimationFrame 绑定浏览器刷新节奏，天然适配当前设备帧率（60fps 或更高），且能自动暂停。
- 起始时间必须用
performance.now()，不能用Date.now()——后者会被系统时间调整干扰 - 进度计算要加
Math.min(elapsed / duration, 1)，防止因单帧延迟导致超调、显示负数或溢出目标值 - 每次只更新一次
innerText，避免高频 DOM 写入触发重排 - 动画函数应闭包保存状态，多个数字实例互不干扰
IntersectionObserver
-
threshold: 0.1表示元素 10% 高度进入视口即触发，比0.5更早响应，体验更自然 - 触发后立刻调用
observer.unobserve(el)，避免重复执行 - 若数字是 AJAX 动态插入的，插入后需手动调用
observer.observe(el) - 目标值建议存在
data-target属性里，方便解耦
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const target = parseInt(entry.target.dataset.target);
animateNumber(entry.target, 0, target);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
<p>document.querySelectorAll('[data-target]').forEach(el => observer.observe(el));</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10595" title="htmlppt.skill"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill10595" title="htmlppt.skill" class="overflowclass">htmlppt.skill</a>
<p class="overflowclass">把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p>
</div>
<a rel="nofollow" href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
处理带单位、逗号或小数点的数字文本
原始 HTML 常含非数字字符，如 +2,847、3.2万、¥12,999.99。直接读 innerText 会得 NaN，必须先提取纯数字再还原格式。
- 用正则
/[+-]?\d*\.?\d+/提取首个有效数字（支持负号、小数点） - 若需保留后缀，可拆为「数字部分」+「原始后缀」，动画只驱动前者，最后拼接回显
- 对含千分位逗号的数字，动画过程中不要实时格式化——每帧都
toLocaleString()会严重拖慢性能 - 建议动画结束后再格式化一次并写入，或用 CSS
counter+ 伪元素模拟逗号，避免 JS 操作
const rawText = el.textContent; const match = rawText.match(/[+-]?\d*\.?\d+/); const num = match ? parseFloat(match[0]) : 0; // 动画完成后： el.innerText = num.toLocaleString() + rawText.replace(/[+-]?\d*\.?\d+/, '');
真正难的不是让数字动起来，而是让动的过程不跳、不卡、不抢资源、不干扰用户浏览——尤其是多数字同屏、滚动中动态加载、还要兼容低端安卓机时，requestAnimationFrame 的精度控制、IntersectionObserver 的触发边界、以及数字文本的干净剥离，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
