jQuery CountTo插件

2026-01-14 18:18:11作者：晏闻田Solitary

是一个简单易用的jQuery插件，用于将数字递增或递减至目标值。它适用于各种场景，如倒计时、动态计数等。

项目简介

jQuery CountTo允许您轻松地在网页上创建动态数字计数效果。只需提供初始值、目标值和递增速度，即可实现平滑的动画过渡。此插件支持自定义函数以适应不同的需求，并且可以与其他jQuery插件无缝集成。

应用场景

倒计时 - 可用于事件开始、结束日期等场景。
动态统计 - 显示实时数据，例如在线人数、销售额等。
目标进度条 - 显示目标完成度，激励用户积极参与。

特点

简单易用 - 插件安装方便，API简洁明了，便于快速上手。
高度可定制 - 支持设置递增速度、小数位数等参数，满足多样化需求。
性能优异 - 动画过渡流畅自然，为用户提供良好的交互体验。
兼容性好 - 兼容多种浏览器和设备，确保您的应用具有广泛的覆盖范围。

示例代码

以下是一个简单的示例，展示了如何使用jQuery CountTo插件实现一个动态计数效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery CountTo Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mhuggins/jquery-countto@1.5.0/dist/jquery.countTo.min.js"></script>
</head>
<body>
    <div id="counter">0</div>

    <script>
        $(function () {
            $('#counter').countTo({
                from: 0,
                to: 100,
                speed: 2000,
                refreshInterval: 50,
            });
        });
    </script>
</body>
</html>