jquery模拟进度条实现方法

本文实例讲述了jquery模拟进度条实现方法。分享给大家供大家参考。具体如下：
<！doctype html><html><head><meta charset="utf-8"><title>js模拟进度条练习</title><script type="text/javascript" src="http://xiazai.jb51.net/201508/yuanma/jquery-1.8.0.min.js"></script><script type="text/javascript" src="http://xiazai.jb51.net/201508/yuanma/jquery.artDialog.js?skin=default"></script><style>body{ font-size:12px}.aui_nw, .aui_ne, .aui_sw, .aui_se { height: 1px; width: 1px; }.aui_outer, .aui_inner { border: 0; }.aui_state_lock .aui_border { box-shadow: 0 0 10px rgba（0, 0, 0, .8）; }</style></head><body><button id="starLoading">显示进度条</button><div id="msgHtml">http://www.jb51.net</div></body></html><script>（function（w）{var _html="<div style="line-height: 30px;text-align: center;">正在为您载入数据，请稍后……</div><div id="jsLoadOuter" style="width:250px;height:8px;border:#6BAAC9 solid 1px; background:#C0EBFF; margin:0 auto;box-shadow: 0 0 3px #2E94BB;padding:1px"><div id="jsLoadInner" style="background:#54AEE0;height:100%;width:0"></div></div>";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（_nowWidth）>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:"u6b63u5728u52a0u8f7du4e2du2026u2026",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）;};</script>
运行效果如下图所示：
希望本文所述对大家的jquery程序设计有所帮助。