当前位置:软件学堂 > 资讯首页 > 网络编程 > 编程其他 > JS实现用table制作进度条

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制作进度条运行效果

【难点剖析】

本例的重点是如何获取进度,以及如何动态设置进度条的宽度。进度条的进度使用一个固定的常量“200”表示,每次进度显示使用“i/2+"%"”方式运算。动态设置单元格的宽度使用的是“setExpression”方法。

【源码下载】

为了JS代码的准确性,请点击:JS实现用table制作进度条 进行本实例源码下载 

标签: 进度条