引入JS
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/countUp.min.js"></script>
封装函数
/* *elId = 目标元素的 ID; startVal = 开始值; endVal = 结束值; decimals = 小数位数,默认值是0; duration = 动画延迟秒数,默认值是2; */ function rollNum(elId, startVal, endVal, decimalNum) { let n = decimalNum || 0; let countUp = new CountUp(elId, startVal, endVal, n, 2.5, { useEasing: true, // 使用缓和 useGrouping: true, // 使用分组(是否显示千位分隔符,一般为 true) separator: ',',// 分隔器(千位分隔符,默认为',') decimal: '.',// 十进制(小数点符号,默认为 '.') prefix: '', // 字首(数字的前缀,根据需要可设为 $,¥,¥ 等) suffix: '' // 后缀(数字的后缀 ,根据需要可设为 元,个,美元 等) }); if (!countUp.error) { countUp.start(); } else { console.error(countUp.error); } }
调用函数
rollNum("num", 0, 300, 0);
Done !