首页 > 内容 > 程序笔记 > 正文

程序笔记

CountUp.js 轻量级的数值动画JavaScript插件库

2024-07-23 41

CountUp.js 是一款无依赖、轻量级的JavaScript库，专门用于创建数值动画效果，用于创建更具吸引力的数字数据显示动画。它使数字变化更加生动，并支持多种自定义设置，适用于各种场景。

CountUp.js GitHub地址：https://github.com/inorganik/countUp.js/

react-countup https://www.npmjs.com/package/react-countup

CountUp.js 主要功能

数字动画: CountUp.js 可以将数字从一个值平滑地过渡到另一个值，使数据呈现更加直观、吸引人。

增减计数: 它支持递增和递减两种计数方式，您可以通过 startVal 和 endVal 参数设置起始值和结束值。

高度可定制: 支持自定义动画时长、延迟时间、小数位数、前缀、后缀以及重绘行为等多种属性。

跨浏览器兼容: CountUp.js 兼容主流浏览器，可放心使用。

CountUp.js 使用方法

引入库:

下载库并在 HTML 中引用 JavaScript 文件。

使用 CDN 链接：

<script src="https://unpkg.com/countup/dist/countUp.min.js"></script>

使用 npm 安装：npm install countup.js 并导入：

import CountUp from 'countup.js';

创建 CountUp 实例：

const countUp = new CountUp('targetElementId', endValue, options);

targetElementId: 要显示动画数字的 HTML 元素 ID。 endValue: 动画结束时要达到的最终值。 options (可选): 包含动画自定义选项的对象。

启动动画：

countUp.start();

完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CountUp.js 示例</title>
    <script src="https://unpkg.com/countup/dist/countUp.min.js"></script>
</head>
<body>
    <h1 id="counter">0</h1>
    <script>
        const countUp = new CountUp('counter', 1000, {
            duration: 2.5, // 动画时长（秒）
            decimals: 2, // 小数位数
            prefix: '$', // 数字前缀
            suffix: ' 美元', // 数字后缀
        });
        countUp.start();
    </script>
</body>
</html>

以上代码将显示一个数字，从 0 平滑增加到 $1,000.00 美元，耗时 2.5 秒。

更新于：1个月前

赞一波！2

文章评论

全部评论

雷达智富

雷达智富

程序笔记

CountUp.js 轻量级的数值动画JavaScript插件库

相关文章

文章评论