如何使用JavaScript的方式实现常见的进度条呢？
html xmlns=http://www。w3。org/1999/xhtml headtitle标题页-学无忧（www。xue51。com）/title/headbodystyle type=text/css#divLoadCont{position:absolute; z-index:500; left:0; top:0; width:100%; height:98%; clip:rect(0,100%,100%,0); background-color:white; layer-background-color:white; }#divLoad1{position:absolute;...全部
html xmlns=http://www。w3。org/1999/xhtml headtitle标题页-学无忧（www。xue51。com）/title/headbodystyle type=text/css#divLoadCont{position:absolute; z-index:500; left:0; top:0; width:100%; height:98%; clip:rect(0,100%,100%,0); background-color:white; layer-background-color:white; }#divLoad1{position:absolute; layer-background-color:silver; background-color:silver}#divLoad2{position:absolute; left:0; top:0; layer-background-color:navy; background-color:navy}#divLoadText{position:absolute; background-color:transparent; font-family:arial,helvetica; color:Navy; font-size:14px; } /stylescript language=JavaScript type=text/javascriptfunction pro_bwcheck(){ //检测浏览器的代码-通用 this。
ver=navigator。appVersion this。agent=navigator。userAgent this。dom=document。getElementById?1:0 this。
opera5=this。agent。indexOf(Opera 5)-1 this。ie5=(this。ver。indexOf(MSIE 5)-1 this。dom !this。opera5)?1:0; this。
ie6=(this。ver。indexOf(MSIE 6)-1 this。dom !this。opera5)?1:0; this。ie4=(document。all !this。dom !this。
opera5)?1:0; this。ie=this。ie4||this。ie5||this。ie6 this。mac=this。agent。indexOf(Mac)-1 this。ns6=(this。
dom parseInt(this。ver) = 5) ?1:0; this。ns4=(document。layers !this。dom)?1:0; this。bw=(this。ie7 || this。
ie6 || this。ie5 || this。ie4 || this。ns4 || this。ns6 || this。opera5) return this}var bw=new pro_bwcheck()numImages=12 //默认10个图片loaderWidth=350 //设置进度条的宽度currentImg=0function pro_doc_size(){ //判断显示区域 this。
x=0;this。x2=bw。ie document。body。offsetWidth-20||innerWidth||0; this。y=0;this。y2=bw。ie document。
body。offsetHeight-5||innerHeight||0; if(!this。x2||!this。y2) return message('窗体的宽度和高度不够！') this。
x50=this。x2/2;this。y50=this。y2/2; return this;}function pro_obj(obj,nest){ //定义页面中承载进度条的控件属性 nest=(!nest) ? :'document。
'+nest+'。' this。evnt=bw。dom? document。getElementById(obj):bw。ie4?document。all[obj]:bw。ns4?eval(nest+document。
layers。 +obj):0; this。css=bw。dom||bw。ie4?this。evnt。style:this。evnt; this。ref=this。css this。w=this。
evnt。offsetWidth||this。css。clip。width|| this。ref。width||this。css。pixelWidth||0; return this}pro_obj。
prototype。moveIt = function(x,y){ //定义移动方法 this。x=x;this。y=y; this。css。left=x;this。css。top=y}pro_obj。
prototype。clipTo = function(t,r,b,l,setwidth){ //重新定义裁剪方法 this。ct=t; this。cr=r; this。cb=b; this。
cl=l if(bw。ns4){ this。css。clip。top=t;this。css。clip。right=r this。css。clip。bottom=b;this。css。clip。
left=l }else{ if(t0)t=0;if(r0)r=0;if(b0)b=0;if(b0)b=0 this。css。clip=rect(+t+,+r+,+b+,+l+); if(setwidth){this。
css。pixelWidth=this。css。width=r; this。css。pixelHeight=this。css。height=b} }}var oLoad2function startLoading(){ page=new pro_doc_size() //以下设置加载控件的一些基本属性 oLoadCont=new pro_obj('divLoadCont') oLoad=new pro_obj('divLoad1','divLoadCont') oLoad2=new pro_obj('divLoad2','divLoadCont。
document。divLoad1') oLoadText=new pro_obj('divLoadText','divLoadCont。document。divLoad1') oLoad。moveIt(page。
x50-loaderWidth/2,page。y50-20) oLoadText。moveIt(loaderWidth/2 - oLoadText。w/2,10) oLoad。clipTo(0,loaderWidth,40,0,1) //裁剪区域 oLoad2。
per = loaderWidth/numImages //百分比}function loadIt_display(ok){ currentImg++ if(oLoad2) oLoad2。clipTo(0,oLoad2。
per*currentImg,40,0,1) //裁剪显示的区域 if(currentImg=numImages) setTimeout(loadIt_display(1),200) //使用定时器不断加载图片 else{ oLoadCont。
css。visibility='hidden' //进度条加载完成后隐藏 }}/scriptdiv id=divLoadCont div id=divLoad1 div id=divLoad2/divbr div id=divLoadText页面加载中，请稍候。
。。/div /div/divscript startLoading() loadIt_display(1)/script /body/html。收起
