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

wwwarewow

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

阅读量1.4k

点赞数 1

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

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

本文链接：https://blog.csdn.net/JSPSEO/article/details/124626880

版权

JS 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

由于项目需要实现两处数据每时每刻动态变化的效果。就是投大屏的那种，数据不停的向上增长，不是从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. 这样就不需要后台交互就可以模拟出动态效果。

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

wwwarewow

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery 实现数字动态增长变化效果

由于项目需要实现两处数据每时每刻动态变化的效果。就是投大屏的那种，数据不停的向上增长，不是从0开始的那种。纯jquery代码，模拟数据动态增长，无后台数据交互，如下：<body> <div><span class="count">10</span></div> <div><span class="count">10</span></div></body>
复制链接

扫一扫