js数字动态累加

前端需求无底洞，，最近做一个数字累加的动画，主要实现依靠定时器来完成哦0到一个值的过渡，开始的时候做的是单个的数字累加，效果实现后，就在想他要是有多个呢，又或者是在不同的阶段需要不同的速度呢，然后在此基础上做了个多个数值累加且在不同阶段设置不同的速度，当然你还可以根据自己的需求做其他的改变
HTML：
1.单个数值累加

    <input type="button" value="点击单个数字" onclick="add(1020)">
    <div id="test1">1020</div>

Js部分：

function add(setNum){
        var inner = document.getElementById("test1");
        inner.innerHTML = 0
        var num = 0;
        var set = null;
        // 速度
        var speed = 30;
        //每次累加的数值
        var addNum = 88;
        // 设置总的数值
        var setNum = setNum;
        set = setInterval(function(){
            if(num >= setNum){
                num = setNum;
                inner.innerHTML = num;
                clearInterval(set);
            }else{
                num +=addNum;
            }
            inner.innerHTML = num
            // console.log(num)
            // console.log(set)
        },speed);
    }
     add(1020) // 这里调用传值    

2.多个数值累加，不同区间设置不同的速度

    <input type="button" value="一堆数字" onclick="adds()">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

JS:部分

    function adds(){
        var items = document.querySelectorAll('li');
        var start = [0,0,0];
        //要累加的数值
        var end = [2234,4325,8000];
        var set = null;
        var speed = 20;
        // 每次累加的数值 分情况如果两个数值相差过多 不同的阶段累加不同的数值完成
        var addNum1 = 40;
        var addNum2 = 100;
        set = setInterval(function(){
            for(var i = 0; i < items.length; i++){
                // 进行对比
                if(start[i] >= end[i]){
                    start[i] = end[i];
                    items[i].innerHTML = start[i];
                    // 当大于所有数值中最大的一个时结束累加
                    if(items[i].innerHTML >= 4567){
                        clearInterval(set);
                    }
                } else{
                    start[i] +=addNum1;
                    // 对比是否要分不同的累加阶段
                    if(start >= 5000){
                        start[i] +=addNum2;
                    }
                }
                items[i].innerHTML = start[i];
            }
        },speed);
    }