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

如何使用countup.js实现数字动态增长效果？

admin
行业动态
2025-01-26
6

CountUp.js 是一个轻量级 JavaScript 类，用于创建数字动画效果。它支持多种参数配置，如目标元素、起始值、结束值、小数位数和动画持续时间等。

CountUp.js 是一个轻量级的 JavaScript 库，用于创建简单而美观的数字计数动画，它广泛应用于网页中的各种场景，如展示统计数据、倒计时、销售数字等，下面将详细介绍 CountUp.js 的使用方法，包括安装、初始化、配置选项以及一些常见的使用示例。

一、安装 CountUp.js

CountUp.js 可以通过多种方式引入到项目中：

1、通过 CDN 引入：这是最简单的方法，适合快速测试或小型项目。

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

2、通过 npm 安装：对于使用 Node.js 或现代前端构建工具（如 Webpack）的项目，推荐使用 npm 安装。

 npm install countup

二、初始化 CountUp.js

在 HTML 页面中，首先确保已经引入了 CountUp.js 脚本，选择一个容器元素（如<div> 或<span>），并为其设置一个唯一的 ID，使用 JavaScript 初始化 CountUp 实例。

如何使用countup.js实现数字动态增长效果？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CountUp.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/countup@2.3.0/dist/countUp.min.js"></script>
</head>
<body>
    <div id="counter" style="font-size: 48px;">0</div>
    <button onclick="startCounting()">Start Counting</button>
    <script>
        var counterElement = document.getElementById('counter');
        var options = {
            useEasing: true, // 使用缓动效果
            useGrouping: true, // 启用数字分组（千位分隔符）
            separator: ',', // 分组符号
            decimal: '.' // 小数点符号
        };
        var countUpInstance = new CountUp(counterElement, 0, 100, 0, 2.5, options);
        function startCounting() {
            if (!countUpInstance.error) {
                countUpInstance.start();
            } else {
                console.error(countUpInstance.error);
            }
        }
    </script>
</body>
</html>

在这个示例中，我们创建了一个从 0 计数到 100 的动画，持续时间为 2.5 秒。options 对象允许我们自定义动画的行为，如是否使用缓动效果、是否启用数字分组等。

三、配置选项详解

CountUp.js 提供了丰富的配置选项，以满足不同的需求：

选项名	类型	默认值	描述
startVal	Number	0	开始值
endVal	Number	0	结束值
decimal	String	‘.’	小数点符号
decimalPlaces	Number	0	小数位数
duration	Number	2	动画持续时间（秒）
useEasing	Boolean	false	是否使用缓动效果
useGrouping	Boolean	true	是否启用数字分组
separator	String	‘,’	分组符号
prefix	String	”	前缀
suffix	String	”	后缀
numerals	Array	[‘0’, ‘1’, ‘2’, …]	自定义数字字符集