设为首页优惠IDC收藏本站六狼博客六狼论坛
开启辅助访问 切换到窄版

六狼论坛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

新浪微博账号登陆

只需一步，快速开始

搜索
六狼论坛»首页 › WEB前端 › Html/Css › JavaScript进度条源码实例
返回列表 发新帖
查看: 26|回复: 0

JavaScript进度条源码实例

[复制链接]
liss

升级  10.75%

389

主题

389

主题

389

主题

探花

Rank: 6Rank: 6

积分
1215
 楼主| 发表于 2013-2-7 15:08:59 | 显示全部楼层 |阅读模式
1.如图:
 
 
 

 
<!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.
<!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外浏览器）
<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
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表