JavaScript 模擬進度條

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js模擬進度條練習</title>
<script type='text/javascript' src="http://img.233.com/wx/lib/jquery-1.8.0.min.js"></script>
<script type='text/javascript' src='http://img.233.com/wx/artDialog/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.jshtmlcss.com</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:"\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);		
	};
</script>