jquery模拟进度条实现方法_jquery
程序员文章站
2022-04-08 14:25:24
...
本文实例讲述了jquery模拟进度条实现方法。分享给大家供大家参考。具体如下：
';
var __g;
var _maxWidth=100;
var _nowWidth=0;
var _speed=30;
var _step=2;
var __time;
progress={
render:function(fn){
fn&&fn(_html);
_nowWidth=0;
__g=document.getElementById('jsLoadInner');
this.fx();
},
complete:function(fn){
clearTimeout(__time);
progress.completeFn=fn;
this.setOver();
},
setOver:function(){
var _stepa=_step*1.5;
if(_nowWidth<_maxwidth _nowwidth="_nowWidth-0+_stepa;" parseint>parseInt(_maxWidth)?_nowWidth=_maxWidth:'';
__g.style.width=''+_nowWidth+'%';
_speed=(_maxWidth-_nowWidth)/1000;
__time=setTimeout('progress.setOver()',_speed) ;
}else{
clearTimeout(__time);
progress.completeFn&&progress.completeFn();
};
},
fx:function(){
var _stepa=_step;
if(_nowWidth<_maxwidth-5 _stepa="_nowWidth">_maxWidth*0.6?(_stepa*0.02):_stepa;
_nowWidth=_nowWidth-0+_stepa;
parseInt(_nowWidth)>parseInt(_maxWidth)?_nowWidth=_maxWidth:'';
__g.style.width=''+_nowWidth+'%';
__time=setTimeout('progress.fx()',_speed);
}else{
clearTimeout(__time);
};
}
}
w.progress=progress;
})(window)
//
$(function(){
showLoading();
$('body')
.on('click','#starLoading',function(){
showLoading();
})
})
function showLoading(){
//开始显示进度条
progress.render(function(html){
art.dialog({id:"jsLoadingDialog",title:"\u6b63\u5728\u52a0\u8f7d\u4e2d\u2026\u2026",cancel:!1,lock:!0,background:"#fff",fixed:!0,content:html});
});
//请求完成后完成进度条，，，模拟10秒后请求完成
setTimeout(function(){
progress.complete(function(html){
art.dialog.list['jsLoadingDialog']&&art.dialog.list['jsLoadingDialog'].close();
$('#msgHtml').html('进度条已走完');
});
},10000);
};
js模拟进度条练习 http://www.jb51.net