<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>countup.js让数字动起来</title>
<script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script>
</head>
<body>
<div id="box">
<p id="money1">50000</p>
<p id="money2">100000</p>
<p id="money3">20000</p>
</div>
<script>
var options = {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
prefix: '前者',
suffix: '后者'
};
var money1 = new CountUp('money1', 0, 50000, 2, 1, options),
money2 = new CountUp('money2', 0, 100000, 0, 1, options),
money3 = new CountUp('money3', 0, 20000);
money1.start();
money2.start();
money3.start();
/**
* param1: target(dom对象或者一个能获取到dom的字符串,也叫目标对象) *必须
* param2: startVal(动画起始的值如24.02)*必选
* param3: endVal (动画结束的值如94.62) *必选
* param4: decimals(指定小数位数,默认为0,既没有小数) *可选
* param5: duration(整个动画运动的总时间,默认为2s) *可选
* param6: options(用来修改默认的配置项) *可选
**/
// 默认的配置项
// options = {
// useEasing: true, // 是否使用缓动动画,默认为缓动,可以设置为false让其匀速
// useGrouping: true, // 对数字进行分组,如12345,按三位一组变为类似123,45这样的
// separator: ',', // 分组时使用的分隔符默认是逗号,
// decimal: '.', // 小数点
// easingFn: easeOutExpo, // 缓动动画的函数
// formattingFn: formatNumber, // 格式化数字如12345,格式化为123,45
// prefix: '', // 添加前缀如12345,变为¥12345
// suffix: '', // 添加后缀如12345 通过添加后缀变为12345$,12345元之类的
// numerals: [] // 用来做替换操作,一般用不到,默认为空就是不用他
// };
</script>
</body>
</html>
countup.js让数字动起来
猜你喜欢
转载自blog.csdn.net/qq_24504591/article/details/103508947
今日推荐
周排行