<html>
<head>
<title>简单的进度条</title>
<mce: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;
}
--></mce:style><style type="text/css" mce_bogus="1">#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>
<mce:script type="text/javascript"><!--
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
// --></mce:script>
</head>
<body><br/>
<table width="400">
<tr>
<td bgcolor="#FFFFFF" style="padding:2px" mce_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>