两种思路用javascript实现实现简单的数字滚动动画

设计这样的一个动画，已知一个数字值，例如 num = 10000，动画效果：已进入页面的时候，数字以某种速度一直增加到10000为止。

下面提供两种思路。

1. 利用类似高数中的等比数列原理，设置一个比例值rate，当然该比例值的值域属于 (0 ,1)，这样每进行一次乘法运算，值才会越来越小。第一次的结果为 result = num * rate，如果result <= num，则 计算left = num - result；再对left做乘法，并对result重新复制， result += left * rate，再判断result 和 num的大小，如果result < num，则继续。

详细代码如下：

countNum = {
        _rate: 0.3,
        _left: 1,
        changeNum: 0,
        _firstNum: 0,
        _tmpNum: 0,
        _firstTime: 1, // 判断是否是第一次计算
        init: function(num) {
            this._firstNum = num;
            this.interval(); // 调用计算方法
        },
        compute: function() {
            if(countNum._left === 0) {  // 如果剩余差值为0，则结束循环调用
                clearInterval(countNum.int);
            } else {
                if (countNum._firstTime === 1) {  // 为1时，为第一次调用
                    countNum.changeNum = Math.ceil(countNum._firstNum * countNum._rate);
                    countNum._left = countNum._firstNum - countNum.changeNum;
                    countNum._firstTime = 0; // 设置标志为0
                } else {
                    countNum.changeNum += Math.ceil(countNum._left * countNum._rate);
                    countNum._left = countNum._firstNum - countNum.changeNum;
                }
		// 输出该值或进行其他操作
                console.log(countNum.changeNum);
            }
        },
        interval: function() {
            this.int = setInterval(this.compute, 100);
        }
    };

    countNum.init(10000);

2.  第二种思路是，通过setTimeOut来实现，设定一个恒定的增值step，每次增加step，并有一个目前值和总数的比例，如果该比值大于0.95，则说明已经很接近总数，那么调整时间间隔为100，即放慢速度展示。

var Rank = {

        // 初始化
        init: function() {
            var rank_num = 10000;
            if(!rank_num) {
                return;
            }
            if(typeof Number(rank_num) === "number") {
                this._compute(rank_num);
            }
        },

        // 按照一定规则计算
        _compute:function(rank_num){
            var timer, temp_num, step, rate;

            // 第一次计算出一个初始值
            temp_num = Math.round(rank_num/3*2);

            // 每次增加数值
            step = Math.round(Math.round(rank_num/2))/100;

            // 循环更新temp_num的值
            function _count(temp_num, step){
                temp_num = Math.round(temp_num + step * Math.random());

                // 调用 _show 方法
                Rank._show(temp_num);

                // 根据条件判断，改变方法执行的时间间隔
                rate = (temp_num / rank_num > 0.95) ? 100 : 10;
                timer = setTimeout(function(){
                    _count(temp_num, step);
                },rate);

                if (temp_num > rank_num) {
                    clearTimeout(timer);
                    Rank._show(rank_num);
                }
            }
            _count(temp_num, step);
        },

        // 显示数字的变化情况
        _show: function(temp_num) {

            // 数字的变化
            console.log(temp_num);
        },
        
    };  Rank.init();