`

【转】javacsript进度条源码

阅读更多
<!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> 
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics