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

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

wwwarewow

1549人浏览 · 2022-05-07 11:19:50

wwwarewow · 2022-05-07 11:19:50 发布

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

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

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

【计算机视觉】Pixel逐像素分类&Mask掩码分类理解摘要

魔乐社区

计算机视觉（opencv）实战三十二——CascadeClassifier 人脸微笑检测（摄像头）

本文从原理到实现，详细介绍了基于 OpenCV Haar 分类器的人脸与微笑检测：讲解了 Haar 特征和级联检测原理。对代码逐行拆解并解释参数含义。画出完整流程图，帮助理解执行过程。给出了常见问题和优化建议，甚至扩展到深度学习方法。这种方法简单、轻量、实时性好，非常适合入门和小型应用项目。但如果需要更高准确率和更强鲁棒性，建议使用深度学习检测器替代 Haar 分类器。