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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
javascript学习随笔(使用window和frame)的技巧
Mar 08 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 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解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
10款最好的Web开发的 Python 框架
2015/03/18 Python
Python中super函数的用法
2017/11/17 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
幼师专业求职推荐信
2013/11/08 职场文书
理财学专业自荐书
2014/06/28 职场文书
经济纠纷起诉状
2015/05/20 职场文书
工作自我评价范文
2019/03/21 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android