CountUp.js数字滚动插件使用方法详解

作者：资源驿站

时间：2026-10-23

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>

CountUp.js简介与配置