您当前的位置: 首页 >  Java

漏刻有时

暂无认证

  • 0浏览

    0关注

    717博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

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

漏刻有时 发布时间:2020-10-23 12:15:17 ,浏览量:0

引入JS
    
    
封装函数
        /*
     *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 !

关注
打赏
1661217259
查看更多评论
立即登录/注册

微信扫码登录

0.0402s