Counter-Up 是一款方便易用的 JavaScript 库，可以在网页上实现数字计数器的效果。该库采用 jQuery 实现，支持多种自定义选项和动画效果，适用于各种前端应用场景。
安装与引入
使用 npm 可以很方便地安装 Counter-Up：
npm install counterup --save
在 HTML 文件中引入 jQuery 和 Counter-Up：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="node_modules/counterup/jquery.counterup.min.js"></script>
基本用法
在 HTML 中设置需要计数的元素，例如：
<span class="counter">0</span>
在 JavaScript 中使用 Counter-Up：
$(document).ready(function() { $('.counter').counterUp(); });
这样就可以看到数字按照默认选项从 0 开始逐步增加到指定值。
自定义选项
Counter-Up 支持多种自定义选项，可以通过传递一个包含选项的对象来进行设置。例如：
$('.counter').counterUp({ delay: 10, time: 1000, formatter: function (n) { return n.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); } });
其中：
delay：每个数字的延迟时间（毫秒），默认为 10；time：总计数时间（毫秒），默认为 1000；formatter：格式化函数，用于自定义显示数字的格式。
上述示例中的 formatter 函数使用正则表达式将数字格式化为千位分隔符的形式。
动画效果
Counter-Up 支持多种动画效果。例如：
$('.counter').counterUp({ delay: 10, time: 1000, offset: 70, animate: 'scroll' });
其中：
offset：计数器距离顶部的偏移量（像素），默认为 100；animate：动画效果，可以是'scroll'、'count'或自定义函数。
上述示例中的 animate 参数设置为 'scroll'，表示使用滚动动画效果。如果设置为 'count'，则使用计数动画效果。也可以传递一个自定义的函数来实现特殊的动画效果。
示例代码
以下是一个完整的示例代码，包括 HTML、CSS 和 JavaScript：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------- ------------ ------- ----------------------------------------------------------- ------- -------------------------------------------------------------- ------- -------- - ---------- ----- ------------ ----- ------ ----- - -------- ------- ------ ----- ------------------------ -------- ---------------------------- - ------------------------- ------ --- ----- ----- ---------- -------- --- - ------ ------------------------------------- ------- -- ------- --- -------- -------- --- --- --------- ------- -------展开代码
该示例代码设置了一个带有样式的计数器元素，使用了滚动动画效果和千位分隔符的格式化。可以根据实际需要进行修改。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36274
