JS 实现数字滚动变化效果

想办法给你个振刀

于 2021-08-30 16:50:33 发布

阅读量1.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/SPX113/article/details/120000260

前端专栏收录该内容

1 篇文章

订阅专栏

这篇博客展示了如何利用JavaScript创建一个数字滚动动画效果。通过指定元素ID、目标数值和延迟时间，函数`numscroll`能够平滑地更新元素显示的数字。示例中分别设置了三个不同的数字滚动实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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);