官方名称
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!