CountUp.js数字滚动插件使用方法详解
作者:资源驿站时间:2026-10-23 12:04:51浏览:357
CountUp.js是一款轻量级且无依赖的JavaScript类,用于实现数字滚动效果。本文详细介绍其可配置项,包括目标元素ID、起始值、结束值、小数位数及动画时长等参数,并提供完整的HTML与JavaScript代码示例,帮助用户快速集成数字滚动功能。
CountUp.js简介与配置
CountUp.js 是一款轻量级且无需依赖的 JavaScript 类,通过简单配置即可实现数字滚动动画效果
在线演示地址: countUp.js
支持配置参数如下:
target = 目标元素的 ID;
startVal = 开始值;
endVal = 结束值;
decimals = 小数位数,默认值是0;
duration = 动画延迟秒数,默认值是2;
//用法:
var options = {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
}
var demo = new CountUp(target , startVal, endVal , decimals , duration , options);
demo.start();
代码实例演示
具体代码实现示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script>
<script type="text/javascript">
var options = {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
};
var demo = new CountUp('box', 0, 4068, 0, 2.5, options);
if (!demo.error) {
demo.start();
} else {
console.error(demo.error);
}
</script>
</body>
</html>

以上内容为本文全部介绍,旨在协助读者学习,欢迎继续支持本网站。
作者最新文章
JS中使用位运算(~~)和一元加号(+)快速转换字符串为整数
2026-11-03 22:41:12
怎么使用命令行批量格式化项目中的JS文件
2026-11-03 19:04:42
JS代码美化后报错怎么办?常见格式化冲突解决方法
2026-11-03 18:47:01
不用moment.js,怎么用原生JS Intl API格式化时间戳
2026-11-03 18:10:30
原生JS与dayjs获取当前日期的代码对比
2026-11-03 17:57:26
