jquery 实现数字动态增长变化效果

wwwarewow

已于 2022-05-07 12:24:45 修改

阅读量1.5k

点赞数 1

分类专栏： JS 文章标签： jquery javascript

于 2022-05-07 11:19:50 首次发布

本文链接：https://blog.youkuaiyun.com/JSPSEO/article/details/124626880

版权

JS 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种纯jQuery实现的数据动态增长方法，适用于大屏展示数据不断增涨的场景。通过设置定时器，每5秒更新一次数据显示，每次在现有数值基础上随机增加0到20，无需后台交互即可产生动态效果。这种方法可以方便地应用于项目中并进行美化以提升视觉体验。

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

由于项目需要实现两处数据每时每刻动态变化的效果。就是投大屏的那种，数据不停的向上增长，不是从0开始的那种。

纯jquery代码，模拟数据动态增长，无后台数据交互，如下：

<body>
    <div><span class="count">10</span></div>
    <div><span class="count">10</span></div>
</body>

setInterval(function(){
    $('.count').each(function () {
        var v = $(this).text();
        $(this).prop('Counter',v).animate({
                Counter: parseInt(v) + parseInt(Math.random() * 20)
            }, {
            duration: 2000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });    
}, 5000);

上述代码实现的效果是：

每5秒动态增长一次，不是从零开始。每次都从现有的数值上，随机增加 0~20. 这样就不需要后台交互就可以模拟出动态效果。

具体项目上，美化一下就很实用了。