countupjs实例

0

` 元素用于显示计数结果，以及一个按钮，点击按钮时会触发 `startCounter` 函数。

**CSS 部分**：简单地设置了一些样式，使计数器的数字显示更大、更醒目。

**JavaScript 部分**：

首先声明了一个全局变量 `counter` 用于存储 CountUp.js 实例。

`startCounter` 函数中，先判断 `counter` 是否已经存在，如果存在，则调用其 `reset` 方法重置计数器，并更新显示值为 `0`；如果不存在，则创建一个新的 CountUp.js 实例，新实例的参数依次为：目标元素的 `id`（即 `'counter'`）、起始值（`0`）、目标值（`100`）、动画持续时间（以秒为单位，这里设置为 `2` 秒）以及小数点后的位数（这里设置为 `2`），最后调用 `start` 方法启动计数动画。

## 三、配置 CountUp.js 实例的参数

CountUp.js 提供了丰富的参数配置选项，可以根据实际需求进行定制，以下是一些常用的参数及其说明：

|参数名|类型|默认值|描述|

|---|---|---|---|

|startVal|Number|0|计数器的起始值|

|endVal|Number|无|计数器的目标值|

|decimalPlaces|Number|0|小数点后的位数|

|duration|Number|2|动画持续时间，以秒为单位|

|useEasing|Boolean|false|是否使用缓动函数|

|separator|String|','|数字分隔符，用于大数字的显示格式|

|prefix|String|''|数字的前缀|

|suffix|String|''|数字的后缀|

要创建一个从 `100` 计数到 `200`，持续时间为 `3` 秒，小数点后保留 `1` 位，且使用千位分隔符的计数器，可以这样配置：

```javascript

let counter = new CountUp('counter', 100, 200, 3, 1, {

useEasing: true,

separator: ' ',

prefix: '$',

suffix: ' USD'

});

counter.start();

```

## 四、控制 CountUp.js 实例的方法

除了 `start` 方法用于启动计数动画外，CountUp.js 还提供了其他一些方法来控制计数器的行为：

**pauseResume**：暂停或恢复计数动画，调用该方法时，如果计数器正在运行，则会暂停；如果处于暂停状态，则会恢复。

```javascript

counter.pauseResume();

```

**reset**：重置计数器，将计数器的值重置为起始值，并停止动画。

```javascript

counter.reset();

```

**update**：更新计数器的显示值，可以在动画过程中随时调用该方法来改变计数器的当前显示值。

```javascript

counter.update(50);

```

## 五、相关问答FAQs

问题1：如何在 CountUp.js 实例中使用自定义的缓动函数？

CountUp.js 本身提供了一些内置的缓动函数，如 `linear`、`easeInQuad` 等，如果需要使用自定义的缓动函数，可以通过 `options` 参数中的 `easingFn` 属性来指定。

```javascript

function customEasing(t, b, c, d) {

t /= d;

return -c * t*t*t + b;

let counter = new CountUp('counter', 0, 100, 2, 2, {

easingFn: customEasing

});

counter.start();

```

上述代码中，`customEasing` 函数就是自定义的缓动函数，它接收四个参数：`t`（当前时间）、`b`（起始值）、`c`（变化量）和 `d`（持续时间），并返回计算后的值。

问题2：如何同时创建多个 CountUp.js 实例并分别控制它们？

可以在不同的元素上创建多个 CountUp.js 实例，并通过不同的变量来引用它们，然后分别调用相应的方法来控制每个实例。

```html

开始计数1开始计数2

```

上述代码中，创建了两个 CountUp.js 实例 `counter1` 和 `counter2`，分别关联到不同的 `