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

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

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

投稿

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

猜你喜欢

如何在asp中创建DSN？

asp如何使用SMTP Service发送邮件？

ASP中使用SQL语句教程

求某数以内的所有质数的js算法

数据库的选择原则是什么？

ASP利用TCPIP.DNS组件获得域名对应的IP

js实现(层,表格)元素圆角的函数

设计评论表单[译]

这些有问题的细节设计

W3C优质网页小贴士（四）

用javascript做拖动层布局的思路

asp如何获知文件最后的修改日期和时间？

模拟兼容性的 inline-block 属性

怎么让别人看不到网页源代码

如何做好一份前端工程师的简历？

asp显示字符串前5个文字

某一公司的ASP面试题

ADO组件之插入数据记录

asp访google分页代码

MySQL数据库中应当如何实施info()函数