当前位置：首页 > 行业动态 > 正文

countup.js 使用

admin
行业动态
2025-02-12
2

countUp.js 是一个轻量级的 JavaScript 库，用于在网页上实现数字的动态计数效果。它允许你指定起始值、结束值和持续时间，并自动生成动画效果。

CountUp.js 是一个轻量级、无依赖的 JavaScript 库，专门用于创建从某个数字到目标数字的平滑动画效果，它使得网页中的数字展示更加生动和直观，适用于各种场景，如网站统计数据展示、电子商务网站的销售额展示等。

CountUp.js 的使用步骤

1、引入 CountUp.js：

通过 CDN 引入：在 HTML 文件中添加以下脚本标签来引入 CountUp.js 的最新版本。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.7/countUp.min.js"></script>

通过 npm 安装：如果你使用 npm 进行包管理，可以通过以下命令安装 CountUp.js，然后在你的 JavaScript 文件中引入。

 npm install countup.js

 import { CountUp } from 'countup.js';

2、创建 HTML 结构：

在 HTML 文件中创建一个用于显示数字的元素，例如一个div 元素，并给它一个唯一的 ID。

 <div id="countup-element"></div>

3、初始化 CountUp 对象：

在 JavaScript 中初始化 CountUp 对象，并调用start 方法来开始动画，你需要传递目标元素的 ID、起始值和结束值给 CountUp 构造函数。

countup.js 使用

 const countUp = new CountUp('countup-element', 0, 100);
     if (!countUp.error) {
         countUp.start();
     } else {
         console.error(countUp.error);
     }

CountUp.js 的配置选项

CountUp.js 提供了丰富的配置选项，你可以通过传递一个对象来设置这些选项，以下是一些常用的配置选项：

选项	描述
startVal	起始值（默认为 0）
decimalPlaces	小数位数（默认为 0）
duration	动画持续时间（以秒为单位，默认为 2）
useEasing	是否使用缓动动画（默认为 true）
useGrouping	是否使用千分位分隔符（默认为 true）
separator	千分位分隔符（默认为逗号），如果设置为空字符串则不使用分隔符
decimal	小数点符号（默认为点）
prefix	前缀（默认为空字符串）
suffix	后缀（默认为空字符串）

示例：

const options = {
    startVal: 0,       // 起始值
    decimalPlaces: 2,  // 小数位数
    duration: 2,       // 动画持续时间（秒）
    useEasing: true,   // 使用缓动动画
    useGrouping: true, // 使用千分位分隔符
    separator: ',',    // 千分位分隔符
    decimal: '.',      // 小数点符号
    prefix: '$',       // 前缀
    suffix: ' USD'     // 后缀
};
const countUp = new CountUp('countup-element', 0, 1000, 0, 2.5, options);
if (!countUp.error) {
    countUp.start();
} else {
    console.error(countUp.error);
}

CountUp.js 的回调函数

CountUp.js 支持回调函数，你可以在动画开始、结束或更新时执行自定义逻辑，以下是一些可用的回调函数：

回调函数	描述
onStart	动画开始时触发
onUpdate	动画更新时触发
onComplete	动画完成时触发

示例：

const options = {
    startVal: 0,
    duration: 2,
    onStart: () => console.log('动画开始'),
    onUpdate: () => console.log('动画更新'),
    onComplete: () => console.log('动画完成')
};
const countUp = new CountUp('countup-element', 0, 5000, options);
if (!countUp.error) {
    countUp.start();
} else {
    console.error(countUp.error);
}

CountUp.js 的常见应用场景

1、网站统计数据展示：在展示网站统计数据时，如访问量、用户数量等，使用 CountUp.js 可以使数字增长过程更加直观和动态。

2、电子商务网站的销售额展示：在电子商务网站中，动态展示销售额可以增加用户的购买欲望。

countup.js 使用

3、数据可视化项目：在数据可视化项目中，CountUp.js 可以用来动态展示统计数据，如用户增长、收入增长等。

4、计数器：可以用于创建各种计数器，如倒计时、计时器等。

5、统计图表：可以与其他图表库结合使用，动态展示图表中的数据。

CountUp.js 的集成到现有项目中

CountUp.js 易于集成到各种现有项目中，例如使用 React 或 Vue.js 的项目中，以下是一个简单的示例，展示如何在 React 项目中使用 CountUp.js：

1、安装 CountUp.js：

 npm install countup.js

2、创建 React 组件：

countup.js 使用

 import React, { useEffect } from 'react';
   import { CountUp } from 'countup.js';
   const CountUpComponent = ({ endValue }) => {
       useEffect(() => {
           const countUp = new CountUp('countup-element', endValue);
           if (!countUp.error) {
               countUp.start();
           } else {
               console.error(countUp.error);
           }
       }, [endValue]);
       return <div id="countup-element"></div>;
   };
   export default CountUpComponent;

3、使用组件：

 import React from 'react';
   import CountUpComponent from './CountUpComponent';
   const App = () => {
       return (
           <div>
               <h1>Count Up Example</h1>
               <CountUpComponent endValue={100} />
           </div>
       );
   };
   export default App;