编程 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 相关文章推荐

取得一定长度的内容，处理中文

Dec 20 Javascript

js获取select标签的值且兼容IE与firefox

Dec 30 Javascript

Js表格万条数据瞬间加载实现代码

Feb 20 Javascript

原生javascript实现DIV拖拽并计算重复面积

Jan 02 Javascript

Javascript中arguments和arguments.callee的区别浅析

Apr 24 Javascript

全面了解JavaScript对象进阶

Jul 19 Javascript

关于使用js算总价的问题

Jun 23 Javascript

jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法

Oct 20 jQuery

基于Vue的延迟加载插件vue-view-lazy

May 21 Javascript

vue mounted组件的使用

Jun 18 Javascript

Vue验证码60秒倒计时功能简单实例代码

Jun 22 Javascript

微信小程序外卖选购页实现切换分类与数量加减功能案例

Jan 15 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