位置：首页>> 网络编程>> JavaScript>> 几个javascript显示加载进度条代码

几个javascript显示加载进度条代码

　来源：蓝色理想　发布时间：2008-01-19 10:52:00　

标签：进度条,javascript

最近发现一常见的加载进度条（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>

投稿

几个javascript显示加载进度条代码

猜你喜欢