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

官方名称

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

插件JS

ProgressBarWars.js

使用步骤

引入外部JS包

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/ProgressBarWars.js"></script>

html代码

<div id="vaderSize" style="width: 200px;padding: 0;margin: 40px 0 0 18px;"></div>

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！