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 相关文章推荐
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
微信小程序实现左滑删除效果
Nov 18 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代码实现页面伪静态的方法
2015/07/25 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
详解10分钟学会vue滚动行为
2017/09/21 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
简单了解python的内存管理机制
2019/07/08 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
python tkinter实现连连看游戏
2020/11/16 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
《尊严》教学反思
2014/02/11 职场文书
大学新闻系求职信
2014/06/03 职场文书
个人违纪检讨书
2014/09/15 职场文书
小学班主任评语
2014/12/29 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书