Posted on 2007-10-23 09:48
草 鞋 閱讀(166)
評論(0) 編輯 收藏 所屬分類:
JavaScript
<html>
<head>
<title>簡單的進度條</title>
<style type="text/css">
<!--
#ProgressBar {
font:12px Verdana, Arial, Helvetica, sans-serif;
border:1px solid #5B94DF;
}
#Pointer {
border:1px solid #FFFFFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#DDE9F9, endColorstr=#81ACE7);
}
#Lable {
position:absolute;
width:100%;
text-align: center;
}
-->
</style>
<script>
i=0;
function run() {
i++;
p = i + "%";
document.getElementById("Pointer").style.width = p;
document.getElementById("Lable").innerHTML = p;
flag = window.setTimeout(run,300);
if(i == 100) { window.clearTimeout(flag); i=0;}
}//Endfor
</script>
</head>
<body><br/>
<table width="400">
<tr>
<td bgcolor="#FFFFFF" style="padding:2px">
<div id="ProgressBar">
<div id="Lable">0%</div>
<div id="Pointer" style="width:0%"></div>
</div></td>
</tr>
</table><br/>
<button onClick="run();">開始</button>
</body>
</html>