html

来源:互联网 发布:2016nba总决赛数据统计 编辑:程序博客网 时间:2024/06/05 12:42

 

<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>

原创粉丝点击