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

数字滚动增长效果概述

在之前的项目需求中，需要实现数字从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();
   });

可视区域触发机制

若需实现数字进入可视区域时才启动动画的效果，开发者可自行监听DOM元素是否处于视口内，并在满足条件时调用相应的动画逻辑。

以上内容涵盖了数字增长动画的主要实现思路，如有疑问欢迎留言交流，感谢支持。