countUp.js实现数字滚动效果

2023年6月11日上午1:21 • JavaScript

下面我将详细讲解“countUp.js实现数字滚动效果”的完整攻略。

什么是countUp.js

countUp.js是一个轻量级的JavaScript库，它可以帮助开发者实现数字滚动效果，使数字以动画的形式逐步增加到目标值。

应用场景

countUp.js常用于数字计数器、数据统计、商品价格展示等需要数字动态变化的场景。

使用方法

步骤一：引入countUp.js库

在html文件的head标签中引入countUp.js库：

<script src="https://cdn.bootcdn.net/ajax/libs/countup.js/2.0.7/countUp.min.js"></script>

步骤二：创建一个容器

在html文件中创建一个容器，用于展示动态数字：

<div id="count-container"></div>

步骤三：编写JavaScript代码

在JavaScript代码中，使用countUp.js创建一个计数器对象，设置目标值和一些选项，并调用start()方法开始动画：

var countUp = new CountUp('count-container', 0, 1000, 0, 2.5, options);
if (!countUp.error) {
    countUp.start();
} else {
    console.error(countUp.error);
}

其中，'count-container'是容器的id，0是开始值，1000是结束值，0是小数点位数，2.5是动画持续时间（以秒为单位），options是一些额外选项。

示例一：基础使用

接下来，我们通过一个示例说明countUp.js的基本使用方法。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>数字滚动效果示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/countup.js/2.0.7/countUp.min.js"></script>
</head>

<body>
  <h1>数字滚动效果示例</h1>
  <div id="count-container"></div>
  <button onclick="count()">开始动画</button>

  <script>
    function count() {
      var countUp = new CountUp('count-container', 0, 1000);
      if (!countUp.error) {
        countUp.start();
      } else {
        console.error(countUp.error);
      }
    }
  </script>
</body>

</html>

代码解释：

引入countUp.js库；
创建一个包含一个按钮和一个数字容器的html文件；
在JavaScript代码中，创建一个计数器对象，设置开始值为0，结束值为1000；
给按钮添加一个点击事件，当点击时调用count()函数；
在count()函数中，如果计数器对象没有错误，就调用start()方法开始动画。

示例二：添加一些选项

在下面的示例中，我们添加了一些选项，如前缀、后缀和小数点位数：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>数字滚动效果示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/countup.js/2.0.7/countUp.min.js"></script>
</head>

<body>
  <h1>数字滚动效果示例</h1>
  <div id="count-container"></div>
  <button onclick="count()">开始动画</button>

  <script>
    function count() {
      var options = {
        prefix: '$',
        suffix: 'K',
        decimal: '.',
        duration: 2.5
      };
      var countUp = new CountUp('count-container', 0, 1234.56, 2, 2.5, options);
      if (!countUp.error) {
        countUp.start();
      } else {
        console.error(countUp.error);
      }
    }
  </script>
</body>

</html>

代码解释：