700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Js实现数字动态滚动效果

Js实现数字动态滚动效果

时间:2024-04-07 02:58:31

相关推荐

Js实现数字动态滚动效果

生成gif后有点卡顿,实际上是很流畅的。

完整代码如下

DOM

<!DOCTYPE html><html><head><title></title><style type="text/css">#root{display: flex;justify-content: center;width: 50px;padding: 10px;font-size: 25px;font-weight: 600;border: 5px solid grey;border-radius: 20px;}</style></head><body><div id="root">0</div></body>

JS

start函数用于启动动画,roll函数是具体进行数字滚动的函数,它返回一个闭包用于存储变化的数组n(也就是实现的数字)。参数total是你所设置的最后停止的数字,step是你所希望的跳动的间隔。

start函数里面的runtime表示动画总共经历的时间,默认设置为1000ms,最小须大于等于300ms,避免动画过快看不清。

<script type="text/javascript">function roll(total, idname, step) {let n = 0;return function () {n = (n + step) >= total ? total : (n + step);if (n <= total) {document.getElementById(idname).innerHTML = n;}}}function start(index, idname, step, runtime = 1000){let rolling = roll(index, idname, step)runtime = (runtime >= 300) ? runtime : 1000;for (let i = 0; i < (index/step); i++) {let timer = setTimeout(rolling, (runtime/index)*i*step)}clearTimeout(timer);}start(100,'root', 4,)</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。