JS实现用table制作进度条

2012/11/9 15:55:07作者：佚名来源：网络

移动端

【实例名称】

JS实现用table制作进度条

【实例描述】

本例提供的进度条使用简单、方便，完全没有使用图片来特效，仅使用两个简单的单元格完成。

【实例代码】

<HTML>
<HEAD>
<TITLE> 进度条 -学无忧（www.xue51.com）</title>
<script language="javascript">
var i=0;
var timer;
function Progress()
{
 if(i==200)
 {
  clearTimeout(timer);//清除定时器
  return;
 }
 i=(i<200)?(i+4):0;      //步长为4
 myBar.style.setExpression("width","i","javascript");
//设置滚动条的宽度
 percentBar.innerText=i/2+"%";                       
//设置进度的显示
 timer=setTimeout("Progress()",250);
//设置定时器，每隔250毫秒增加一次进度
}
</script>
</HEAD>
<BODY onload="Progress()">
<br>
<table align="center" width="50%">
<tr><td><span id="myBar" 
style="background-color:blue"></span></td></tr>
<tr><td><span width="%100" id="percentBar">
</span></td></tr>
</table>
</BODY>
</HTML>

【运行效果】

用table制作进度条运行效果