基于jQuery实现动态数字展示效果

基于jQuery实现动态数字展示效果，可以借助现成的插件或者手写js代码来实现。以下是具体的攻略和两个示例：

1. 使用现成的jQuery插件实现动态数字展示

目前比较流行的jQuery数字动画插件有两款：

1. CountUp.js：一个简单易用的数字计数器插件，可以实现数字从0到目标值的过渡动画效果。
2. Odometer.js：一个特别酷炫的数字计数器插件，可以在数字变化时仿佛是不间断的滚动。

使用这两款插件，可以很轻松地实现数字展示效果。下面给出两个具体示例：

示例一：使用CountUp.js实现数字过渡动画

<!-- html -->
<span id="number">0</span>

<!-- 引入jQuery和CountUp.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/countup.js/2.0.7/countUp.min.js"></script>

<script>
$(function(){
  // 获取数字所在的DOM元素
  var number = document.getElementById('number');
  // 创建CountUp对象
  var countUp = new CountUp(number, 1000);
  // 执行动画效果
  countUp.start();
});
</script>

上述代码中，我们首先引入了jQuery和CountUp.js。代码中new CountUp(number, 1000)创建了一个CountUp对象，其中number表示要展示数字的DOM元素，1000表示目标数字。最后调用countUp.start()方法即可运行动画。

示例二：使用Odometer.js实现滚动数字

<!-- html -->
<div>
  <span>My money：</span>
  <span class="odometer">0</span>
</div>

<!-- 引入jQuery和Odometer.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/odometer.js/0.4.8/odometer.min.js"></script>

<script>
$(function(){
  // 获取数字所在的DOM元素
  var odometer = document.querySelector('.odometer');
  // 创建Odometer对象
  var od = new Odometer({
    el: odometer,
    value: 0 // 初始值
  });
  // 执行动画效果
  od.update(1000); // 设置目标值
});
</script>

上述代码中，我们引入了jQuery和Odometer.js插件。代码中new Odometer({...})创建了一个Odometer对象，其中el表示要展示数字的DOM元素，value表示初始值。最后调用od.update(1000)方法即可运行动画。

2. 手写jQuery实现动态数字展示

除了使用现成的插件，我们也可以参考其源码，手写一些jQuery代码来实现数字展示效果。下面给出一个用jQuery手写的动态数字示例：

<!-- html -->
<span id="number">0</span>

<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
(function($){
  $.fn.counter = function(options) {
    // 默认配置
    var defaults = {
        start: 0, // 初始值
        end: 1000, // 结束值
        time: 3000 // 持续时间
    };
    var opts = $.extend({}, defaults, options);
    // 获取目标数字和当前数字
    var $this = $(this);
    var end = parseInt(opts.end);
    var current = parseInt(opts.start);
    // 计算数字步长
    var step = Math.ceil((end - current) / (opts.time / 10));
    // 定时器动画
    var timer = setInterval(function() {
        if(current >= end) {
            $this.text(end);
            clearInterval(timer);
        } else {
            current += step;
            $this.text(current);
        }
    }, 10);
    return this;
  };
})(jQuery);

// 调用
$(function(){
  $('#number').counter({
    start: 0,
    end: 1000,
    time: 3000
  });
});
</script>

上述代码中，我们定义了一个名为counter的jQuery插件，用于实现数字动画效果。代码中defaults变量为插件的默认参数，$.extend()方法用于将用户参数扩展到默认值中。接着获取目标数字和当前数字，计算数字步长。最后使用setInterval()方法创建计时器动画，并返回jQuery对象。

调用插件时，我们可以根据需要设置不同的参数，如上述代码中的start、end和time参数。

以上是基于jQuery实现动态数字展示效果的完整攻略和两条示例说明。