深入探究CountUp.js

发布时间：2023-05-20

一、简介

CountUp.js是一个JS库，可以在网页中创建动态数字效果。它可以在数值之间自动生成过渡效果，可以设置起始值和终止值，可以设置数字格式和持续时间。CountUp.js是由inorganik制作的，可以通过GitHub免费下载。

二、使用方法

使用CountUp.js非常简单。首先，你需要把CountUp.js文件引入到你的HTML文档中，可以通过CDN或者本地下载。然后，在HTML文件中，创建一个空的标签（例如div），再在你的JavaScript文件中，实例化CountUp对象，并将其放入空标签中。这个过程包含以下几步：

  1. 引入CountUp.js文件:
<script src="CountUp.js"></script>
  1. 创建一个空的标签：
<div id="countUpDiv"></div>
  1. 实例化CountUp对象:
var countUp = new CountUp('countUpDiv', 0, 100);
countUp.start();

这段JavaScript代码创建了一个动态数字效果，其中0是起始值，100是终止值，countUpDiv是一个空的标签id。CountUp.js将自动生成数字过渡效果，并将结果放入标签中。

三、常见设置

1. 设置持续时间

默认情况下，CountUp.js的动态数字效果使用1.5秒的时间过渡，可以通过options对象中的duration参数进行设置。如下：

var options = {
   duration: 5
}
var countUp = new CountUp('countUpDiv', 0, 100, 0, 5, options);
countUp.start();

这个代码块将持续时间设置为5秒，使过渡效果更加缓慢。

2. 设置数字格式

CountUp.js可以自定义数字的样式，例如添加货币符号或者小数位。CountUp.js通过实例化CountUp对象时的options参数进行设置，它包含以下几个可选参数:

var options = {
   useEasing: true, 
   useGrouping: true, 
   separator: ',', 
   decimal: '.',
   prefix: '$',
   suffix: 'USD'
}
var countUp = new CountUp('countUpDiv', 0, 100, 2, 5, options);
countUp.start();

这段代码块将数字格式设置为有分组（千位）分隔符逗号，两位小数，货币符号为美元，后缀为USD。更多参数可以在CountUp.js的文档中查找到。

3. 设置回调函数

CountUp.js可以设置回调函数，当数字动画完成时，可以执行一个函数。例如，当数字从0到100的过渡效果完成之后，可以隐藏一个元素。可以通过回调函数参数callbacks完成。

var options = {
   onComplete: function() {
       document.getElementById('countUpDiv').style.display = 'none';
   }
}
var countUp = new CountUp('countUpDiv', 0, 100, 2, 5, options);
countUp.start();

这段代码块将在动态数字效果结束后隐藏元素。

四、总结

CountUp.js提供了一种简单的方法来创建动态数字效果，可以设置起始值、终止值、持续时间和数字格式等。通过使用CountUp.js，你可以让数字在网页中呈现生动有趣的过渡效果。

推荐文章