Jquery 定时器 联合 bootStarp 进度条

DIv样式

<div id= "inner_stop" class="progress progress-striped active" style= "width: 50%;margin: auto;">
<div id="inner" class="progress-bar progress-bar-success" ></div>
</div>

 

function show() {
var inner_stop_width = document.getElementById("inner_stop").offsetWidth;
if (document.getElementById("inner").offsetWidth < inner_stop_width)//offsetWidth实现的时候width是没有宽度的，而style.width实现的时候则有宽度（px）！
{
document.getElementById("inner").style.width = (document
.getElementById("inner").offsetWidth + 20)
+ "px";//每次执行show()函数的时候宽度都会加上20！
console.log(document.getElementById("inner").style.width);//console 控制台 ：可以在网页上看到width的变化(利用F12)
} else {
document.getElementById("inner").style.width = inner_stop_width
+ "px";//如果大于1000px的话，只能将1000px赋值给border-width;!
stop();//此时就应该执行停止定时器的函数！
}
}
var timer;//定义在两个函数外面，因为两个函数都会用到！
function start() {
timer = window.setInterval(show, 2000);//每隔200ms调用一次show函数
}
function stop() {
timer = window.clearInterval(timer);
$.bootstrapLoading.end();
}

转载于:https://www.cnblogs.com/DeBugger-/p/10254841.html