编程 Javascript

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

Posted in Javascript onOctober 17, 2019

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数字滚动插件使用方法详解

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

bocaidada

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

获取JavaScript用户自定义类的类名称的代码

Mar 08 Javascript

javascript学习随笔(使用window和frame)的技巧

Mar 08 Javascript

ext实现完整的登录代码

Aug 08 Javascript

jquery操作复选框checkbox的方法汇总

Feb 05 Javascript

jQuery滚动新闻实现代码

Jun 26 Javascript

JavaScript BASE64算法实现(完美解决中文乱码)

Jan 10 Javascript

对angular4子路由&辅助路由详解

Oct 09 Javascript

详解wepy开发小程序踩过的坑(小结)

May 22 Javascript

js获取本日、本周、本月的时间代码

Feb 01 Javascript

微信小程序仿通讯录功能

Apr 09 Javascript

通过实例解析JavaScript常用排序算法

Sep 02 Javascript

在vue中实现清除echarts上次保留的数据(亲测有效)

Sep 09 Javascript

CountUp.js实现数字滚动增值效果

Oct 17 #Javascript

countUp.js实现数字动态变化效果

Oct 17 #Javascript

jQuery/JS监听input输入框值变化实例

Oct 17 #jQuery

countup.js实现数字动态叠加效果

Oct 17 #Javascript

vue使用showdown并实现代码区域高亮的示例代码

Oct 17 #Javascript

vue-devtools的安装和使用步骤详解

Oct 17 #Javascript

express中static中间件的具体使用方法

Oct 17 #Javascript