countUp.js实现数字动态变化效果
更新时间：2019年10月17日 16:02:06 作者：lifangfang0607
这篇文章主要为大家详细介绍了countUp.js实现数字动态变化效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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如何返回字符串的所有排列问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
layui 实现自动选择radio单选框(checked)的方法
今天小编就为大家分享一篇layui 实现自动选择radio单选框(checked)的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了PHP抓取HTTPS内容的实现方法，以及在抓取的时候遇到的一个HTTPS问题的处理办法，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-09-09
JavaScript 中处理 null和 undefined的常见方法
文章介绍了可选链操作符（?.）和空值合并操作符（??）的使用方法,并对比了它们与逻辑非运算符（!）的区别,还讨论了使用宽松比较运算符（==）和自定义函数来优化判断的几种方法,以提高代码的可读性和性能,感兴趣的朋友跟随小编一起看看吧2025-01-01
这篇文章主要给大家介绍了关于利用JS、CSS实现列表自动滑动滚动效果的相关资料,本人在项目中遇到这样的需求,亲自来做的,通过html页面配合js,css来做出的列表自动滑动,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了IE8中jQuery.load()加载页面不显示的原因，在文中给大家介绍了jquery中load()方法的使用要点,需要的朋友可以参考下2018-11-11
网页上可以自由改变字体大小是个非常有助于用户体验的小功能，现在许多网站上都有此功能，今天我们来简单实现下。2015-04-04
js遍历table的所有元素的代码，方便我们控制table的所有元素，颜色，样式等2008-07-07
这篇文章主要介绍了Bootstrap网格系统偏移列和嵌套列的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
ES6中Array.copyWithin()函数的用法实例详解
ES6为Array增加了copyWithin函数，用于操作当前数组自身，用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法，需要的朋友参考下2017-09-09
最新评论