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 相关文章推荐
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
vue-cli 如何打包上线的方法示例
May 08 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
javascript递归函数定义和用法示例分析
Jul 22 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
php之XML转数组函数的详解
2013/06/07 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
python动态网页批量爬取
2016/02/14 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
python 实现表情识别
2020/11/21 Python
.NET remoting中对象激活的两种方式
2015/06/08 面试题
财务部总监岗位职责
2014/03/12 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
2014年冬季防火方案
2014/05/21 职场文书
暑期培训班招生方案
2014/08/26 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
小学生通知书评语
2014/12/31 职场文书
课外活动实习计划
2015/01/19 职场文书
春节慰问信范文
2015/02/15 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
小学总务工作总结
2015/08/13 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript