JS实现数字动画增长效果_javascript技巧

答案：通过JavaScript的requestAnimationFrame实现数字动态增长动画，从0逐步增加到目标值，支持设置时长、小数位和后缀，可批量处理多个元素并扩展触发方式。

让数字在网页中动态增长，是一种常见的视觉效果，常用于数据展示、仪表盘或统计页面。JavaScript 能轻松实现这种动画效果，让用户感知数值的变化过程，提升交互体验。

基本思路

数字增长动画的核心是：从起始值（通常是 0）逐步增加到目标值，通过定时器控制每次变化的间隔，在指定时间内完成整个动画过程。

关键参数包括：

• 目标值：最终要显示的数字
• 动画时长：整个增长过程持续的时间（毫秒）
• 刷新频率：使用 setInterval 控制更新间隔，通常设为 16~50 毫秒
• 缓动效果（可选）：让增长速度更自然，比如先快后慢

简单实现方法

以下是一个基础但实用的实现方式：

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

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

73

查看详情

function animateNumber(element, finalValue, duration = 2000) {
let startTime = null;
const startValue = 0;
<p>function step(currentTime) {
if (!startTime) startTime = currentTime;
const progress = Math.min((currentTime - startTime) / duration, 1);</p><pre class='brush:php;toolbar:false;'>// 线性增长
const currentValue = Math.floor(progress * (finalValue - startValue) + startValue);
element.textContent = currentValue;
if (progress < 1) {
requestAnimationFrame(step);
}

}

requestAnimationFrame(step);
}

// 使用示例
const numberElement = document.getElementById(‘counter’);
animateNumber(numberElement, 12345);

这段代码使用 requestAnimationFrame 实现流畅动画，避免卡顿，并自动适配屏幕刷新率。

支持小数和格式化显示

如果需要显示金额、百分比等带小数的数据，可以扩展函数：

function animateNumber(element, finalValue, duration = 2000, decimals = 0, suffix = '') {
let startTime = null;
<p>function step(currentTime) {
if (!startTime) startTime = currentTime;
const progress = Math.min((currentTime - startTime) / duration, 1);</p><pre class='brush:php;toolbar:false;'>const currentValue = parseFloat((progress * finalValue).toFixed(decimals));
element.textContent = currentValue + suffix;
if (progress < 1) {
requestAnimationFrame(step);
}

}

requestAnimationFrame(step);
}

// 显示带单位的数值
animateNumber(document.getElementById(‘price’), 99.99, 1500, 2, ‘ 元’);
animateNumber(document.getElementById(‘rate’), 87.5, 1000, 1, ‘%’);

通过传入小数位数和后缀，能灵活应对多种场景。

多个数字同时动画

页面上有多个计数器时，可以批量处理：

document.querySelectorAll('[data-animate-number]').forEach(el => {
const value = parseInt(el.getAttribute('data-animate-number'));
animateNumber(el, value, 2000);
});

HTML 中只需添加自定义属性即可自动触发：

<div id="counter" data-animate-number="5000">0</div>

这种方式便于维护，也方便与 CMS 或模板系统集成。

基本上就这些。不复杂但容易忽略细节，比如边界处理、重复触发等问题。实际使用中可根据需求加入暂停、重播或滚动触发等功能。