JavaScript进度条源码实例
1.如图:http://www.dwww.cn/upfiles/2008-2/200821415553832071.jpg<!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><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>
2.http://www.dwww.cn/upfiles/2008-2/200821415562399178.jpg
<!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><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>
3.（FF下调试未通过，可能不兼容IE外浏览器）http://www.dwww.cn/upfiles/2008-2/200821415574699768.jpg
<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>
http://hi.baidu.com/sdhzczj/blog/item/6b3eb5e70a85712bb8382048.html
页:
[1]