CounterUp CDN - 让数字动态计数更简单

CounterUp是一个轻量级的Javascript插件，可以很容易地将数字动态计数到给定值。它使用jQuery库，所以需要先引入jQuery，然后在你的HTML代码中添加counterup.js和counterup.min.js库。

安装

在HTML头部添加jQuery库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

然后添加counterup.js和counterup.min.js库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-counterup/1.0.3/jquery.counterup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>

用法

给你的数字容器添加一个class名字 counter 和一个 data-count 属性，包含你想计数到的值。

<span class="counter" data-count="100">0</span>

然后，在脚本中使用$('.counter').counterUp();来调用插件。

<script>
$(document).ready(function() {
    $('.counter').counterUp({
        delay: 10,
        time: 1000
    }); // delay表示延迟时间，time表示计数的时间（毫秒）
});
</script>

Demo

使用以下的HTML代码制作显示数字动态计数到指定值的计数器。

<div class="counter-container">
    <div class="counter-box">
        <i class="fa fa-users"></i>
        <h2 class="counter"><span class="count" data-to="250">0</span>+</h2>
        <p>总客户数</p>
    </div>
    <div class="counter-box">
        <i class="fa fa-thumbs-up"></i>
        <h2 class="counter"><span class="count" data-to="750">0</span>+</h2>
        <p>满意客户数</p>
    </div>
    <div class="counter-box">
        <i class="fa fa-rocket"></i>
        <h2 class="counter"><span class="count" data-to="150">0</span>+</h2>
        <p>项目完成数</p>
    </div>
    <div class="counter-box">
        <i class="fa fa-clock-o"></i>
        <h2 class="counter"><span class="count" data-to="60000">0</span>+</h2>
        <p>工作时间（小时）</p>
    </div>
</div>

然后，在脚本中添加以下代码调用插件。

<script>
$(document).ready(function() {
    $('.count').counterUp({
        delay: 10,
        time: 1000
    });
});
</script>

总结

CounterUp CDN是一个非常简单易用的Javascript插件，可以让数字动态计数更容易更好看。它非常适合用于制作网站首页的统计数字信息展示。