问题描述:
再开发项目过程中,遇到一个问题,就是执行一个过程的时候,这个过程可能比较长,比如查询,因为查询的内容比较多,所以在查询过程中需要给客户一个比较好的体验,所以决定给客户一个进度条。
网上搜索,似乎都并不是很管用,都是什么文件上传之类进度,太过复杂。
问题解决:
在页面上增加一个类似如下的
- <tr id="process" style="display: none";>
- <td colspan="4" align="center" valign="top">
- <font color="#006699" size="2" face="宋体">正在查询中,请稍等...</font>
- <br>
- <input type="text" id="processBars" size=46 />
- </td>
- </tr>
然后写一个js方法实现,只是用了一个循环方法,调用的时候会循环,
- /**
- *进度条
- */
- var bar = 0;
- var line = "||";
- var amount = "||";
- function processBar() {
- barbar = bar + 2;
- amountamount = amount + line;
- document.getElementById("processBars").value = amount;
- if (bar < 50) {
- setTimeout("processBar()", 100);
- } else {
- bar = 0;
- amount = line;
- processBar();
- }
- }
- function getProcessBar() {
- document.getElementById("process").style.display = "block";
- processBar();
- }
那么你只要在调用查询这个方法的时候去调用上面的 getProcessBar()方法即可,如下
- <td width="100%" colspan="4" align="right" class="textline">
- <input name="queryBtn" type="button" class="off" id="queryBtn"
- onMouseOver="change_bg(this)" onMouseOut="change_back(this)"
- value="查询" onclick="doQuery();">
- <input name="clearBtn" type="button" class="off" id="clearBtn"
- onMouseOver="change_bg(this)" onMouseOut="change_back(this)"
- value="重置" onclick="doClear();">
- </td>
- function doQuery(strSrc)
- {
- getProcessBar();
- form.action.value = "list";
- form.submit();
- }
当然我们调用查询完之后,会重新提交页面,就不会再跑那个循环方法。
后记:
只是个简单的方法,或许在别的地方不适用,不过在我们这个项目刚好适用,呵呵,简单就可以~