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


Posted in Javascript onOctober 17, 2019

本文实例为大家分享了countUp.js实现数字动态变化的具体代码,供大家参考,具体内容如下

countUp.js官网:演示地址

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>数字增长效果</title>
</head>
<body>
 <h1 id="num1"></h1>
 <h1 id="num2"></h1>
 <h1 id="num3"></h1>
 
 <script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script>
 <script type="text/javascript">
  var options = {
   useEasing: true, // 使用缓和
   useGrouping: true, // 使用分组(是否显示千位分隔符,一般为 true)
   separator: ',', // 分隔器(千位分隔符,默认为',')
   decimal: '.', // 十进制(小数点符号,默认为 '.')
   prefix: '', // 字首(数字的前缀,根据需要可设为 $,¥,¥ 等)
   suffix: ''  // 后缀(数字的后缀 ,根据需要可设为 元,个,美元 等) 
  };
  
   // CountUp(参数一, 参数二, 参数三, 参数四, 参数五, 参数六)
 // 参数一: 数字所在容器
 // 参数二: 数字开始增长前的默认值(起始值),一般从 0 开始增长
 // 参数三: 数字增长后的最终值,该值一般通过异步请求获取
 // 参数四: 数字小数点后保留的位数
 // 参数五: 数字增长特效的时间,此处为3秒
 // 参数六: 其他配置项
 // 注: 参数六也可不加,其配置项则为默认值

 new CountUp("num1", 0, 1380, 0, 3, options).start();
 new CountUp("num2", 0, 1380, 2, 3, options).start();
 new CountUp("num3", 0, 1380, 4, 3, options).start();
 </script>
</body>
</html>

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

Javascript 相关文章推荐
JavaScript 高效运行代码分析
Mar 18 Javascript
js函数调用常用方法详解
Dec 03 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 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
在Express中提供静态文件的实现方法
Oct 17 #Javascript
微信小程序一周时间表功能实现
Oct 17 #Javascript
You might like
谈谈PHP语法(4)
2006/10/09 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
学习ExtJS 访问容器对象
2009/10/07 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python文件处理
2016/02/29 Python
python 为什么说eval要慎用
2019/03/26 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
医院总经理职责
2013/12/26 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
一份文言文检讨书
2014/09/13 职场文书
运动会通讯稿50字
2015/07/20 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书