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 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
JS 事件绑定函数代码
Apr 28 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
微信小程序选择图片控件
Jan 19 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使用SOAP扩展实现WebService的方法
2016/04/01 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
php实现session共享的实例方法
2019/09/19 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
Javascript的匿名函数小结
2009/12/31 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
js数组的操作指南
2014/12/28 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
python如何实现int函数的方法示例
2018/02/19 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
new修饰符是起什么作用
2015/06/28 面试题
民主生活会汇报材料
2014/12/15 职场文书
门面租赁合同范文
2019/08/06 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
Java异常处理try catch的基本用法
2021/12/06 Java/Android