javascript实现数据自动模拟系列(1):ProgressBarWars.js进度条动画轮播

官方名称

jQuery仿造星球大战激光剑效果水平进度条

插件JS

ProgressBarWars.js

使用步骤 引入外部JS包

html代码

JS代码

        $(function () {
            //初始加载;
            getBars("#vaderSize", 87, true);
            //定时刷新;
            setInterval(function () {
                var number = Math.floor(Math.random() * 99 + 1);
                getBars("#vaderSize", number, false)
            }, 5000);
        });

        /*封装进度条
         * id，进度条所在容器的id;
         * num,初始数值;
         * */
        function getBars(id, num, flag) {
            $(id).ProgressBarWars4({
                porcentaje: num,
                estilo: "vader10",//vader，vader1~10,柱图颜色；
                tiempo: 5980,
                alto: "12px",//高度
                flag: flag
            });
        }

Done！