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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
js去除空格的12种实用方法
Nov 08 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 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
解析php中获取系统信息的方法
2013/06/25 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
python获取网页状态码示例
2014/03/30 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
Python实现的矩阵类实例
2017/08/22 Python
关于Python的一些学习总结
2018/05/25 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
车工岗位职责
2013/11/26 职场文书
预备党员转正思想汇报
2014/01/12 职场文书
车辆安全检查制度
2014/01/12 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
二手房购房意向书范本
2014/04/01 职场文书
公司请假条范文
2014/04/11 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
大学生自荐书范文
2015/03/05 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
Nginx 常用配置
2022/05/15 Servers