數字滾動效果

想要實現把數字一位一位的分開，比如把數字 168 分成1、6和8，個位數 8 從 0 增加到 9，十位數就加 1，類似這樣的效果，在網上也找了很多資料，終於實現了，現在分享下：

效果如下：

html 代碼：

<ul>
    <li class="test1"></li>
    <li class='test2'></li>
    <li class='test3'></li>
</ul>

js 代碼：

var x = 241;
var y = 24;
var z = 155;
var oX = x.toString();
var oY = y.toString();
var oZ = z.toString();
var oNum = [oX, oY, oZ];   
var oText = ['人使用……','家機構使用……','個交易模型'];

x，y，z 為 3 個自定義的數字，oX，oY，oZ 是把數字轉化成字符串，下面通過 for 循環把內容插入到每個 li 里：

for (var i = 0; i < oNum.length; i++) {
    var text = '';
    for (var index = 0; index < oNum[i].length; index ++) {
        text += '<b>' + 0 + '</b>'
    }
    text += '<span>' + oText[i] + '</span>';
    $('ul li').eq(i).html(text);
} 

出來的效果是：

會根據每個數字有多少位數，生成多少個數字滾動，然后通過定時器來實現數字滾動：

function setNum(obj,num){
    var n = new Array;
    var timer = new Object;
    var oString = num.toString();
    for (let i = 0; i < oString.length; i++) {
        n[i] = 0;
        timer[i] = setInterval(function(){
            n[i] = n[i] >= 9 ? 0 : n[i] + 1;
            $(obj).eq(i).html( n[i] );  
            var text = '';
            for (let k = 0; k < oString.length; k++) {                        
                text += $(obj).eq(k).html();                        
            }  
            if (text == num) {
                for(var each in timer){
                    clearInterval(timer[each]);
                }
            }                                        
        }, 30 * Math.pow(10, oString.length - 1 - i));
    }            
}
setNum('.test1 b', x)
setNum('.test2 b', y)
setNum('.test3 b', z) 

這里封裝了一個 setNum 函數，需要傳入顯示數字的元素節點和數字兩個參數

for(var each in timer) 這個循環是用來清除所有定時器

Math.pow(10, oString.length - 1 - i) 是用來取 10 的幾次方(十位數是個位數的10倍，所以設置十位數定時器的延遲時間是個位數的10倍)