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

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

Javascript 相关文章推荐
加速IE的Javascript document输出的方法
Dec 02 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
jquery的live使用注意事项
Feb 18 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
tab栏切换原理
Mar 22 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 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
You might like
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
django中的ajax组件教程详解
2018/10/18 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
Python与R语言的简要对比
2017/11/14 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
实习自我鉴定
2013/12/15 职场文书
直接有效的自我评价
2014/01/11 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
运动会致辞稿
2015/07/29 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers