前端JS实现数字不断变化增加的效果

最新推荐文章于 2025-03-10 17:27:10 发布

阿甘gump994

最新推荐文章于 2025-03-10 17:27:10 发布

阅读量6.5k

点赞数 4

分类专栏：前端常用代码文章标签： javascript

本文链接：https://blog.youkuaiyun.com/gogozhifu/article/details/119148996

版权

前端常用代码专栏收录该内容

2 篇文章

订阅专栏

分享一个JS方法，可以实现数字不断增加的效果。

参考代码如下。

HTML代码：

<span id="my-number">123</span>

JS代码：

/* 示例效果可以看这个： https://www.gogozhifu.com  */
/* 其中的回调次数更新就是利用的该JS方法  */

addNumber(123, 456, 'my-number');

function addNumber(start, end, id){
        var o = document.getElementById(id);
        var i = start;
        var Interval;
        if(i < end){
            Interval = setInterval(function(){
                i += 2; // 设置每次增加的动态数字，可调整
                if(i > end) {
                    clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
                    o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
                    i = 0;
                } else {
                    o.innerHTML = i.toLocaleString();
                }
            }, 10); // 数据跳转的速度控制
        }
    }

其中把数字用toLocaleString()处理可以格式化，把1234567变成1,234,567这样的千分位格式。