JavaScript实现数字滚动增长与千分位格式化

作者：窗边听雨

时间：2026-10-30

本文介绍如何使用JavaScript实现数字从0到目标值的滚动增长效果，并结合正则表达式处理千分位逗号分隔。通过requestAnimationFrame优化动画性能，并支持可视区域监听触发，适用于数据展示场景。

文章目录

数字滚动增长效果概述

在之前的项目需求中，需要实现数字从0递增到目标值的动画效果，具体表现可参考相关演示图片。

数字滚动增长效果概述

基于该核心逻辑，可以进一步扩展出多种不同的视觉呈现效果。

数字滚动增长效果概述

核心实现思路

实现这一功能主要包含两个核心步骤：

第一步是对数字进行格式化，具体为每隔三位数字插入一个逗号分隔符。

第二步是让数字产生动态变化的视觉效果。

对于1使用正则来完成十分的方便

千分位格式化逻辑


this.fomatNum = function(num) {
      var str = num.toFixed(this.option.decimal);//精确到小数位数多少位
      var num1, x1, x2, reg;
      arr = str.split(".");
      x1 = arr[0];
      x2 = arr.length > 1 ? '.' + arr[1] : "";
      reg = /(\d+)(\d{3})/;
      if (this.option.isfomat) {
        while (reg.test(x1)) {
          x1 = x1.replace(reg, '$1' + "," + "$2");
        }
      }
      if (this.option.isfomat) {
        return this.option.prefix + x1 + x2;
      } else {
        return this.option.prefix + str;
      }
    }

对于动态变化效果，可以利用requestAnimationFrame方法来实现平滑的动画过渡，同时需做好浏览器兼容性处理。

动画执行与兼容性处理


var change = function() {
  var p = Math.min(1.0, (new Date().getTime() - that.startTime) / that.option.duration);//当前时间减去开始时间，然后除以总时间，Math.min,两个数取最小值。
  var nums = that.num * p;
  that.elm.innerHTML = that.fomatNum(that.num * p);
  if (p < 1.0) {//
     requestAnimationFrame(function() {
        change();
     });
   } else {
        cancelAnimationFrame(change);
       }
  }
  requestAnimationFrame(function() {
     change();
   });