javascript插件：countUp.min.js数字滚动效果

原创

漏刻有时 2022-02-10 17:10:35 博主文章分类：javascript ©著作权

©著作权归作者所有：来自51CTO博客作者漏刻有时的原创作品，请联系作者获取转载授权，否则将追究法律责任

引入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);
        }
    }