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

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

引入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 !

相关文章
|
16天前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
10天前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
|
25天前
|
JavaScript 前端开发
基于SVG的js圆形菜单插件
这是一款基于SVG的js圆形菜单插件。该js圆形菜单插件可以生成漂亮的圆形菜单效果,支持二级菜单,支持使用鼠标滚动切换菜单
50 16
|
21天前
|
JavaScript
时尚简洁的js轮播图特效插件
这是一款时尚简洁的js轮播图特效插件。该轮播图采用es6语法制作,底部带缩略图和描述信息。图片和描述信息在切换时同步滑动。
|
18天前
|
JavaScript 前端开发 异构计算
兼容移动手机的js拖拽插件Draggin.js
兼容移动手机的js拖拽插件Draggin.js
30 1
|
2月前
|
Web App开发 JavaScript iOS开发
JS弹出式QQ在线客服插件
JS弹出式QQ在线客服插件
26 6
|
2月前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
43 5
|
2月前
|
Web App开发 JavaScript 前端开发
高性能的纯Js滚动条美化插件smooth-scrollbar
smooth-scrollbar是一款高性能的纯JavaScript滚动条美化插件。该滚动条为现代浏览器而制作,它具有高性能,自由配置,平滑滚动等特点,支持各种现代桌面浏览器和手机设备。
|
存储 JavaScript 前端开发
JavaScript与PHP中正则
有个在线调试正则的工具,点击查看工具。下面的所有示例代码,都可以在codepen上查看到。
JavaScript与PHP中正则
|
JavaScript 前端开发 PHP