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 !

相关文章
|
24天前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件,具有美观、易用,占用的资源较低等特点,可以给弹幕设置内容、颜色、头像、链接地址等属性,鼠标悬停等,简单实用,欢迎下载!
39 5
|
4天前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
1月前
|
人工智能 JavaScript 前端开发
使用Node.js模拟执行JavaScript
使用Node.js模拟执行JavaScript
|
1月前
|
消息中间件 JavaScript 前端开发
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
45 1
|
1月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
104 1
|
24天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
30 0
|
1月前
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
48 0
|
1月前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具
|
1月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API服务器
【10月更文挑战第12天】使用JavaScript和Node.js构建简单的RESTful API服务器
17 0
|
1月前
|
移动开发 JavaScript 前端开发
【JavaScript】JS执行机制--同步与异步
【JavaScript】JS执行机制--同步与异步
21 0