进度条

<html>
<head>
<title>进度条</title>
</head>
<style type="text/css">
#per { BORDER-TOP: white 2px inset;
BORDER-RIGHT: white 2px inset;
BORDER-LEFT: white 2px inset;
BORDER-BOTTOM: white 2px inset;
BACKGROUND: white;
HEIGHT: 10px;
WIDTH: 200px;
}
#perr{ WIDTH: 0%;
HEIGHT: 6px;
}
#perrr{ FONT-SIZE: 1px;
BACKGROUND: highlight;
WIDTH: 100%;
HEIGHT: 100%
   }
</style>
<script language="javascript">
i=0;
function start(){
ba=setInterval("begin()",100);//setInterval 返回的是一个全局变量,一个间隔数值.这个数值是表示调用setInterval的次数
}
function begin(){
i+=1;
if(i<=100){
document.getElementById("perr").style.width=i+"%";
document.getElementById("perF1").innerHTML=i+"%";
}
}
</script>

<body onload="start();" >
<table border=0>
<tr>
<td><div id=per><div id=perr><div id=perrr></div></div></div></td>
<td><div id="perF1">0%</div></td>
</tr>
</table>
</body>
</html>

你可能感兴趣的:(进度条)