JS实现数字动画增长效果_javascript技巧-js教程-PHP中文网

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

幻影之瞳

发布： 2025-10-31 22:14:01

原创

294人浏览过

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

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

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

基本思路

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

关键参数包括：

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

简单实现方法

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

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

腾讯智影-AI数字人

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

查看详情

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 或模板系统集成。

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

以上就是JS实现数字动画增长效果_javascript技巧的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JavaScript：将特定格式字符串高效转换为二维数组的教程获取 JavaScript 列表长度的正确方法 JavaScript：将字符串转换为数组 JavaScript中获取列表长度的正确方法：避免字符串长度陷阱 JavaScript中从HTML隐藏输入获取列表长度的常见陷阱与解决方案