简单进度条JS实现

问题描述：

再开发项目过程中，遇到一个问题，就是执行一个过程的时候，这个过程可能比较长，比如查询，因为查询的内容比较多，所以在查询过程中需要给客户一个比较好的体验，所以决定给客户一个进度条。

网上搜索，似乎都并不是很管用，都是什么文件上传之类进度，太过复杂。

 

问题解决：

 

在页面上增加一个类似如下的

1. <tr id="process" style="display: none";>
2.   <td colspan="4" align="center" valign="top">
3.     <font color="#006699" size="2" face="宋体">正在查询中,请稍等...</font>
4.     <br>
5.     <input type="text" id="processBars" size=46 />
6.   </td>
7. </tr>

然后写一个js方法实现，只是用了一个循环方法，调用的时候会循环，

 

1. /**
2. *进度条
3. */
4. var bar = 0;
5. var line = "||";
6. var amount = "||";
7. function processBar() {
8.     barbar = bar + 2;
9.     amountamount = amount + line;
10.     document.getElementById("processBars").value = amount;
11.     if (bar < 50) {
12.         setTimeout("processBar()", 100);
13.     } else {
14.         bar = 0;
15.         amount = line;
16.         processBar();
17.     }
18. }
19. function getProcessBar() {
20.     document.getElementById("process").style.display = "block";
21.     processBar();
22. }

那么你只要在调用查询这个方法的时候去调用上面的 getProcessBar()方法即可，如下

 

1. <td width="100%" colspan="4" align="right" class="textline">
2.                         <input name="queryBtn" type="button" class="off" id="queryBtn"
3.                             onMouseOver="change_bg(this)" onMouseOut="change_back(this)"
4.                             value="查询" onclick="doQuery();">
5.                         <input name="clearBtn" type="button" class="off" id="clearBtn"
6.                             onMouseOver="change_bg(this)" onMouseOut="change_back(this)"
7.                             value="重置" onclick="doClear();">
8.   </td>

 

1. function doQuery(strSrc)
2. {   
3.       getProcessBar();
4.       form.action.value = "list";
5.       form.submit();
7. }   

当然我们调用查询完之后，会重新提交页面，就不会再跑那个循环方法。

 

后记：

只是个简单的方法，或许在别的地方不适用，不过在我们这个项目刚好适用，呵呵，简单就可以～