之前做过一些数据可视化项目的时候，感觉数字动态效果挺好玩的，就想着分享一些快乐。

可以先看一下效果图：

其实内容也很简单，一个html文件，一个js文件。通过定义速度、显示数字等，来初始化一个数字动态加载的方法。

html

data-top中为要显示的数字，data-speed中配置加载这个数字完成需要的时间，单位为ms。

<div class="number-box">
    <span class="timer counter" data-to="600.88" data-speed="3500">0</span>
    <span class="timer math" data-to="123456" data-speed="3500">0</span>
</div>

<style>
    .number-box {
      width: 70%;
      margin:50px auto;
      box-shadow: rgba(0,0,0,.6) 0 0 8px;
      padding: 60px;
      display: flex;
      border-radius: 10px;
      background: #071435;
      color: #b52eef;
    }
    .number-box::after {
      content: '';
      display: block;
      clear: both;
    }
    .number-box span {
      font-size: 88px;
      font-weight: bold;
      text-align: center;
      flex: 1;
    }
</style>

js文件部分代码

//设置当前元素的选项
var settings = $.extend({}, $.fn.countTo.defaults, {
    from: $(this).data('from'),
    to: $(this).data('to'),
    speed: $(this).data('speed'),
    refreshInterval: $(this).data('refresh-interval'),
    decimals: $(this).data('decimals')
}, options);

// 定义更新值的次数，以及每次更新时值的增量
var loops = Math.ceil(settings.speed / settings.refreshInterval),
increment = (settings.to - settings.from) / loops;

// 定义每次更新都会更改的引用和变量
var self = this,
$self = $(this),
loopCount = 0,
value = settings.from,
data = $self.data('countTo') || {};

$self.data('countTo', data);


// 设置其中某项数字小数点后显示个数
$('.counter').data('countToOptions', {
    formatter: function (value, options) {
      return value.toFixed(2); //小数点后显示1个 
    }
});

//千位数显示"," 
$('.math').data('countToOptions', {
    formatter: function (value, options) {
      return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
    }
});

最后是在页面加载完成的时候调用即可

$(window).ready(function () {
    $('.timer').each(count); 
    function count(options) {
      var $this = $(this);
      options = $.extend({}, options || {}, $this.data('countToOptions') || {});
      $this.countTo(options);
    }

    $(".math").removeClass("timer");
})