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

如何使用CountUp.js实现动态数字计数效果？

admin
行业动态
2025-01-26
4994

CountUp.js 是一个轻量级、无依赖的 JavaScript 库，用于创建数字动画效果，可快速实现数字从起始值到目标值的平滑过渡，支持多种配置和回调函数，易于集成到现有项目中。

CountUp.js 是一个轻量级、灵活的 JavaScript 库，用于创建从某个数字到目标数字的平滑动画效果，以下是关于 CountUp.js 使用的详细介绍：

如何使用CountUp.js实现动态数字计数效果？第1张

1、引入 CountUp.js

通过 CDN 引入：可以在 HTML 文件的<head> 部分添加以下代码来引入 CountUp.js 库文件：

     <script src="https://cdn.jsdelivr.net/npm/countup.js@2.0.7/dist/countUp.min.js"></script>

通过 npm 安装：如果使用 npm 进行包管理，可以通过以下命令安装 CountUp.js：

     npm install countup.js

2、基础用法

HTML 结构：在 HTML 文件中创建一个用于显示数字的元素，例如一个<div> 元素，并为其设置一个唯一的 ID：

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

初始化 CountUp 对象：在 JavaScript 中初始化 CountUp 对象，并调用start 方法开始动画，将页面中的某个元素从 0 计数到 100：

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

3、配置选项

起始值：可以设置动画的起始值，默认为 0，从 50 开始计数到 100：

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

小数位数：设置动画中数字的小数位数，默认为 0，保留两位小数：

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

动画持续时间：设置动画的持续时间，单位为秒，默认为 2 秒，将动画持续时间设置为 3 秒：

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

使用缓动动画：可以设置是否使用缓动动画，默认为true，关闭缓动动画：

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

使用千分位分隔符：可以设置是否使用千分位分隔符，默认为true，关闭千分位分隔符：

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

其他配置：还可以设置千分位分隔符、小数点符号、前缀、后缀等。

     const countUp = new CountUp('countup-element', 100, 0, 2, 1, {
         separator: ',',
         decimal: '.',
         prefix: '$',
         suffix: ' USD'
     });
     if (!countUp.error) {
         countUp.start();
     } else {
         console.error(countUp.error);
     }

4、回调函数

onStart：当动画开始时执行的回调函数，在动画开始时输出日志信息：

     const options = {
         onStart: () => console.log('动画开始')
     };
     const countUp = new CountUp('countup-element', 100, 0, 2, 1, options);
     if (!countUp.error) {
         countUp.start();
     } else {
         console.error(countUp.error);
     }

onUpdate：当动画更新时执行的回调函数，在动画更新时输出当前值：

     const options = {
         onUpdate: () => console.log('当前值：' + this.currentValue)
     };
     const countUp = new CountUp('countup-element', 100, 0, 2, 1, options);
     if (!countUp.error) {
         countUp.start();
     } else {
         console.error(countUp.error);
     }

onComplete：当动画完成时执行的回调函数，在动画完成时输出日志信息：

     const options = {
         onComplete: () => console.log('动画完成')
     };
     const countUp = new CountUp('countup-element', 100, 0, 2, 1, options);
     if (!countUp.error) {
         countUp.start();
     } else {
         console.error(countUp.error);
     }

5、常见应用场景

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

     <div id="visitors-count"></div>
     <script>
         const options = {
             startVal: 0,
             duration: 3,
             useEasing: true,
             useGrouping: true,
             separator: ',',
             decimal: '.'
         };
         const visitorsCount = new CountUp('visitors-count', 123456, options);
         if (!visitorsCount.error) {
             visitorsCount.start();
         } else {
             console.error(visitorsCount.error);
         }
     </script>

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

     <div id="sales-amount"></div>
     <script>
         const options = {
             startVal: 0,
             decimalPlaces: 2,
             duration: 2.5,
             useEasing: true,
             useGrouping: true,
             separator: ',',
             decimal: '.',
             prefix: '$'
         };
         const salesAmount = new CountUp('sales-amount', 98765.43, options);
         if (!salesAmount.error) {
             salesAmount.start();
         } else {
             console.error(salesAmount.error);
         }
     </script>

6、集成到现有项目中

在 React 项目中使用：首先安装 CountUp.js 库，然后在 React 组件中引入并使用。

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

在 Vue 项目中使用：首先安装 CountUp.js 库，然后在 Vue 组件中引入并使用。

     <template>
         <div>
             <span ref="counter">0</span>
         </div>
     </template>
     <script>
     import { CountUp } from 'countup.js';
     export default {
         mounted() {
             const counter = new CountUp(this.$refs.counter, 1000);
             if (!counter.error) {
                 counter.start();
             } else {
                 console.error(counter.error);
             }
         }
     };
     </script>

FAQs（常见问题解答）

1、如何更改 CountUp.js 的动画速度？

答：可以通过修改duration 参数来更改动画速度。duration 参数表示动画的持续时间，单位为秒，将duration 设置为 3 秒，动画将在 3 秒内完成，示例如下：

   const options = { duration: 3 }; // 将动画持续时间设置为 3 秒
   const countUp = new CountUp('countup-element', 100, 0, 2, 3, options);
   if (!countUp.error) {
       countUp.start();
   } else {
       console.error(countUp.error);
   }

2、如何在动画中使用自定义的前缀和后缀？

答：可以在options 参数中设置prefix 和suffix 属性来添加自定义的前缀和后缀，添加美元符号作为前缀和 “USD” 作为后缀：

   const options = { prefix: '$', suffix: ' USD' }; // 添加自定义的前缀和后缀
   const countUp = new CountUp('countup-element', 100, 0, 2, 1, options);
   if (!countUp.error) {
       countUp.start();
   } else {
       console.error(countUp.error);
   }