数字滚动效果

想要实现把数字一位一位的分开，比如把数字 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倍)