问题描述:
再开发项目过程中,遇到一个问题,就是执行一个过程的时候,这个过程可能比较长,比如查询,因为查询的内容比较多,所以在查询过程中需要给客户一个比较好的体验,所以决定给客户一个进度条。
网上搜索,似乎都并不是很管用,都是什么文件上传之类进度,太过复杂。
问题解决:
在页面上增加一个类似如下的
- <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();
- }
当然我们调用查询完之后,会重新提交页面,就不会再跑那个循环方法。
后记:
只是个简单的方法,或许在别的地方不适用,不过在我们这个项目刚好适用,呵呵,简单就可以~
分享到:
相关推荐
js进度条简单实现,详细可见我的blog http://blog.csdn.net/ssqmeng/archive/2008/11/03/3211107.aspx
js实现简单的进度条,用于答题进度,分数指针
可用于站点中,使网站更加具备交互性,使用简单,直接插入原代码的相应位置即可
脚本简介:纯js+css3渐变进度条动画特效是一款css3背景属性绘制渐变的进度条加载动画特效,动态加载效果,背景色动态渐变,纯css+js实现,对于简单页面实现进度条效果可以简单利用此方法。 脚本简介:纯js+css3渐变...
HTML5实现简单进度条效果 HTML5实现简单进度条效果.zip
一款不错的jQuery动态进度条插件的示例及下载,可设定走动速度,限定时间的动态进度条效果,放在网页上也是很漂亮的效果,演示页面一共演示了三种速度的进度条,进度速度可以自己调节,旁边可显示网络速度,用在上传...
js+HTML5 canvas 实现简单的加载条(进度条)功能示例.docx
但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果。 HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取...
使用html5+js实现的进度条。简单、易懂
主要利用CSS实现的非常美观的圆形进度条,但是也有小部分JS逻辑控制,非常的简单,创意十足!2020.06.22更新降低下载积分需求,我个人原意是免费下载的,奈何网站规则不允许!
本文实例为大家分享了JavaScript实现进度条效果的具体代码,供大家参考,具体内容如下 效果图: 简单说一下思路: 主要就是进度条的宽度的动态调整!要用到JS的间隔定时器 setInterval( ) setInterval( ) 功能:每...
模仿海康的存储设备录像回放的进度条,时间刻度,录像状态条,动态刷新
HTML5实现简单进度条效果,这个我们一般用于商城网站,例如,会员的注册,会员提交的信息,是否达到100%,比如在商城里面买了商品,但是商品质量有问题,所以我们需要退换,这时候,我们也可以7用上进度条!
主要为大家详细介绍了js实现简单进度条效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
js,h5,简单使用,实现进度条上传
这是一款基于jqbar.js实现的柱状图动态显示进度条特效,简单实用的jQuery柱形百分比进度条代码。
本文实例为大家分享了js实现动态进度条效果的具体代码,供大家参考,具体内容如下 1.效果 2.源码 <html> <head> [removed] [removed] = function () { var myProgress = document.getElementById...
用CSS实现简单的进度条