JQuery 實現動態數字增加效果

1、效果

 

2、使用

//數字,可以是小數或百分數，可以以任何字符串開頭和結尾，
//但數值需要是連續的，比如：str123.45str，其中123.456是個正常數值

$("選擇器").animateNum(12345);

$("選擇器").animateNum("348245.5323");

$("選擇器").animateNum("68.46%");

$("選擇器").animateNum("$45878.235");

$("選擇器").animateNum("上升153253.245值",false,1000);

 

3、源碼（基於jquery）

;(function ($, window, document, undefined) {
    "use strict";
    /**
     * 動態數字，注動態數值和節點上的已有數值相同時無效（因爲數值沒有發生變化）
     * @param num 數字,可以是小數或百分數，可以以任何字符串開頭和結尾，但數值需要是連續的，比如：str123.45str，其中123.456是個正常數值
     * @param isThd 是否千分位化（可選），默認 true
     * @param delay 動畫延時時長（可選），默認 500
     * @param grain 粒度，在規定時間內數字變化次數（可選），默認 100
     */
    $.fn.animateNum = function (num, isThd, delay, grain) {
        var that = this,
            //獲取前綴
            getPref = function (str) {
                var pref = "";
                for (var i = 0; i < str.length; i++) if (!isNaN(str.charAt(i))) return pref; else pref += str.charAt(i);
            },
            //獲取後綴
            getSuf = function (str) {
                var suf = "";
                for (var i = str.length - 1; i >= 0; i--) if (!isNaN(str.charAt(i))) return suf; else suf = str.charAt(i) + suf;
            },
            //千分位格式化
            toThd = function (num, isThd) {
                if (!isThd) return num;
                if (!/^[0-9]+.?[0-9]*$/.test(num)) return num;
                num = num.toString();
                return num.replace(num.indexOf(".") > 0 ? /(\d)(?=(\d{3})+(?:\.))/g : /(\d)(?=(\d{3})+(?:$))/g, '$1,');
            };
        //配置參數
        this.isThd = isThd === null || isThd === undefined || isThd === true || isThd === "true";
        this.delay = isNaN(delay) ? 500 : delay;
        this.grain = isNaN(grain) ? 100 : grain;
        this.flag = "INPUT,TEXTAREA".indexOf(that.get(0).tagName) >= 0;
        // if (!that || that.text() === num.toString()) return;//判斷節點是否正常，判斷數據是否更新
        var pref = getPref(num.toString());//取出前綴
        var suf = getSuf(num.toString());//取出後綴
        var strNum = num.toString().replace(pref, "").replace(suf, "");//獲取數值
        if (isNaN(strNum) || strNum === 0) {
            that.flag ? that.val(num) : that.html(num);//把非數字和 0 直接返回
            console.error("非法數值！");
            return;
        }
        var int_dec = strNum.split(".");//分出整數和小數兩部分
        var deciLen = int_dec[1] ? int_dec[1].length : 0;//取出小數的長度

        var startNum = 0.0, endNum = strNum;//動態值開始值，動態值結束值
        if (Math.abs(endNum) > 10) startNum = parseFloat(int_dec[0].substring(0, int_dec[0].length - 1) + (int_dec[1] ? ".0" + int_dec[1] : ""));

        var oft = (endNum - startNum) / that.grain, temp = 0;//oft 每次變化的值 ,temp用於作記錄，避免程序出錯不會結束循環
        var mTime = setInterval(function () {
            var str = pref + toThd(startNum.toFixed(deciLen), that.isThd) + suf;
            that.flag ? that.val(str) : that.html(str);
            startNum += oft;//遞增
            temp++;
            if (Math.abs(startNum) >= Math.abs(endNum) || temp > 5000) {
                //遞增的值達到給定值（或循環次數過多5000時）便停止循環
                str = pref + toThd(endNum, that.isThd) + suf;
                that.flag ? that.val(str) : that.html(str);
                clearInterval(mTime);
            }
        }, that.delay / that.grain);
    };

})(jQuery, window, document);