<html>
<head>
<title>進度條</title>
//JS--------------------------------------------------------------------------------------------
<script language="javascript">
var i;
function go() {
bar_width = document.getElementById("bg").clientWidth;
i = bar_width;
setTimeout('start();',300);
}
function start() {
if(i-->0) {
ps.style.width = i;
bn.innerHTML = Math.floor((bar_width-i)/bar_width*100)+"%";
setTimeout('start();',20);
}
}
</script>
<!--CSS-->---------------------------------------------------------------------------------
<style type="text/css">
#bg {
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1, StartColorStr=#FFFF00, EndColorStr=#FF0000);
width:300px;
height:20px;
border:1px solid black;
z-index:0;
position:absolute;
}
#ps {
float:right;
background-color:#FFFF66;
width:100%;
}
#bn {
position:absolute;
text-align:center;
width:100%;
height:100%;
cursor:default;
}
</style>
<!--HTML-->--------------------------------------------------------------------------------
</head>
<body onload="go();">
<div id="bg">
<div id="ps"></div>
<span id="bn">0%</span>
</div>
</body>
</html>
