最近发现一常见的加载进度条（loadding）的问题,所以试试,觉得还不错,大家可以看下.当然这个只是一个效果而已！
呵呵，用的着的时候，你就知道有用了。比如群发email，fax少不了进度条的，更简单的我们直接用一个loadding图片代替也可以!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 进度条 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT="text/html"> <META NAME="Description" CONTENT="有关windows中进度条的实现"> <style type="text/css"> #out{width:300px;height:20px;background:#EEE;} #in{width:10px; height:20px;background:#778899;color:white;text-align:center;} #font_color{background:yellow;text-align:center;color:white;} </style> </HEAD> <BODY onload="start();" > <div id='out'> <div id="in" style="width:10%">10%</div> <div> <script type="text/javascript"> i=0; function start() { ba=setInterval("begin()",100);//setInterval 返回的是一个全局变量，一个间隔数值.这个数值是表示调用setInterval的次数 } function begin() { i+=1; if(i<=100) { document.getElementById("in").style.width=i+"%"; document.getElementById("in").innerHTML=i+"%";} else { clearInterval(ba); document.getElementById("out").style.display="none"; document.write("<span style='background:yellow;text-align:center;color:white;'>加载成功</span>"); } } </script> </BODY> </HTML> [提示：你可先修改部分代码，再按运行]
小改了一下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 进度条 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT="text/html"> <META NAME="Description" CONTENT="有关windows中进度条的实现"> <style type="text/css"> #out{width:300px;height:20px;background:#ccc; position:relative} #in{width:10px; height:20px;background:#03f;color:white;text-align:center;overflow:hidden;} #in_0{text-align:center; width:300px; font-weight:bold; height:20px; line-height:20px; position:absolute; z-index:-1;} #in_1{text-align:center; width:300px; font-weight:bold; height:20px; line-height:20px; color:#fff;} #font_color{background:yellow;text-align:center;color:white;} </style> </HEAD> <BODY onload="start();" > <div id='out'> <div id="in_0">已加载10%</div> <div id="in" style="width:10%"><div id="in_1"></div></div> <div> <script type="text/javascript"> i=0; function start() { ba=setInterval("begin()",100);//setInterval 返回的是一个全局变量，一个间隔数值.这个数值是表示调用setInterval的次数 } function begin() { i+=1; if(i<=100) { document.getElementById("in").style.width=i+"%"; document.getElementById("in_0").innerHTML= document.getElementById("in_1").innerHTML="已加载"+i+"%";} else { clearInterval(ba); document.getElementById("out").style.display="none"; document.write("<span style='background:yellow;text-align:center;color:white;'>加载成功</span>"); } } </script> </BODY> </HTML> [提示：你可先修改部分代码，再按运行]
<style> #load{width:500px;height:25px;border:1px #000 solid;} #loading{position:absolute;z-index:2;height:23;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=#39867b);} #loadtext{position:absolute;z-index:3;width:100%;height:100%;line-height:23px;text-align:center;} </style> <div id="load"><div id="loading"></div><div id="loadtext">1%</div></div> <script> var i=0; function test(){ i++; document.getElementById("loading").style.width = i + "%"; document.getElementById("loadtext").innerText = i + "%"; if(i<100)setTimeout("test()",200); } setTimeout("test()",200); </script> [提示：你可先修改部分代码，再按运行]
请稍等，评论加载中...
请稍等，评论加载中...