JS 实现数字滚动变化效果

复制粘贴源码可直接查看效果

html代码

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

 JS源码

//targetNum为最终数值，delay为效果持续时间
function numscroll(elementID,targetNum,delay){
    let a = document.getElementById(elementID);
    let timmerA =setInterval(function(){
    if(a.innerText != targetNum){
        let num = Number(a.innerText); 
        num +=  Number((targetNum/delay/10).toFixed(0)); //若有小数需求可自行修改此行
        if(num < targetNum){        //针对有余数除不尽
             a.innerText = num;
        }else{
            a.innerText = targetNum;
        }
    }else{
        clearInterval(timmerA)
    }
},100)
}

numscroll('one',98501,2);
numscroll('two',20,2);
numscroll('three',15000,2);