js表单提交显示进度条
时间:2007-09-18 13:10:00
在后台处理数据时,前台页面同时计数显示进度条Proess Bar
使用了layer来显示
用法:
1。引用
<script language="javascript" src="ShowProcessBar.js"></script>
2。在提交Button或<A>或<span> 加扩展属性
IsShowProcessBar="True"
文件ShowProcessBar.js如下
AddProcessbar();
var bwidth=0;
var swidth = document.all.waiting.clientWidth;
function CheckIsProcessBar(obj)
{
if (obj.IsShowProcessBar=="True")
{
return false;
}
else
{
return true;
}
}
function CheckClick(e)
{
if (e == 1)
{
if (bwidth<swidth*0.98){
bwidth += (swidth - bwidth) * 0.025;
if (document.all)document.sbar.width = bwidth;
else document.rating.clip.width = bwidth;
setTimeout(’CheckClick(1);’,150);
}
}
else
{
if(document.all)
{
if(document.all.waiting.style.visibility == ’visible’)
{document.all.waiting.style.visibility = ’hidden’;
bwidth = 1;}
whichIt = event.srcElement;
while (CheckIsProcessBar(whichIt))
{
whichIt = whichIt.parentElement;
if (whichIt == null)return true;
}
document.all.waiting.style.pixelTop = (document.body.offsetHeight - document.all.waiting.clientHeight) / 2 + document.body.scrollTop;
document.all.waiting.style.pixelLeft = (document.body.offsetWidth - document.all.waiting.clientWidth) / 2 + document.body.scrollLeft;
document.all.waiting.style.visibility = ’visible’;
if(!bwidth)CheckClick(1);
bwidth = 1;
}
else
{
if(document.waiting.visibility == ’show’)
{document.waiting.visibility = ’hide’;
document.rating.visibility = ’hide’;
bwidth = 1;}
if(e.target.href.toString() != ’’)
{
document.waiting.top = (window.innerHeight - document.waiting.clip.height) / 2 + self.pageYOffset;
document.waiting.left = (window.innerWidth - document.waiting.clip.width) / 2 + self.pageXOffset;
document.waiting.visibility = ’show’;
document.rating.top = (window.innerHeight - document.waiting.clip.height) / 2 + self.pageYOffset+document.waiting.clip.height-10;
document.rating.left = (window.innerWidth - document.waiting.clip.width) / 2 + self.pageXOffset;
document.rating.visibility = ’show’;
if(!bwidth)CheckClick(1);
bwidth = 1;
}
}
return true;
}
}
function AddProcessbar()
{
var Str=""
Str+= "<div id=waiting style=position:absolute;top:50px;left:100px;z-index:1;visibility:hidden >";
Str+= "<layer name=waiting visibility=visible zIndex=2 >"
Str+= "<table border=2 cellspacing=1 cellpadding=0 bordercolorlight=#FFFFFF bordercolordark=#C0C0C0 bgcolor=#E0E0E0>"
Str+= " <tr>"
Str+= " <td bgcolor=#E0E0E0 height=30px width=300px align=center>"
Str+= " <font color=black>系統正在处理中...</font>"
Str+= " </td>"
Str+= " </tr>"
Str+= " <tr>"
Str+= " <td bgcolor=#E0E0E0>"
Str+= " <img width=1 height=10 name=sbar style=background-color:#6699cc>"
Str+= " </td>"
Str+= " </tr>"
Str+= "</table> "
Str+= "</layer>"
Str+= "</div>"
document.write(Str)
if(document.all)document.onclick = CheckClick;
}
测试文件TestShowBar.HTML
<HTML>
<HEAD>
<script language="javascript" src="ShowProcessBar.js"></script>
</HEAD>
<BODY>
<A href="error.asp" IsShowProcessBar="True">A Href</a>
<BR>
<BR>
<span onclick="location.href=’error.asp’" style="cursor:hand" IsShowProcessBar="True"><font color=blue>Span</font></span>
<BR>
<form action="error.asp">
<input type=Submit value="Submit">
<input type=button value="normal button" IsShowProcessBar="True">
</form>
<P IsShowProcessBar="True">AAAAAAAAAAAAA</P>
</BODY>
</HTML>
标签:进度条,js
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
MySQL 5.0 数据库新特性的存储过程
2007-10-24 19:45:00
SQL 中 CASE 表达式的使用方式
2024-01-23 14:18:47
![](https://img.aspxhome.com/file/2023/2/112852_0s.png)
PHP中合并数组的常见方法分享
2023-05-25 12:02:48
段正淳的css笔记(2)圆角的做法
2007-11-01 21:52:00
使用Python机器学习降低静态日志噪声
2021-11-09 23:48:57
![](https://img.aspxhome.com/file/2023/0/81520_0s.png)
Python性能优化技巧
2021-06-29 12:48:32
联邦学习神经网络FedAvg算法实现
2022-05-25 12:06:34
![](https://img.aspxhome.com/file/2023/0/130640_0s.png)
python3 tkinter实现添加图片和文本
2022-08-07 04:28:17
![](https://img.aspxhome.com/file/2023/3/86133_0s.jpg)
python多线程下信号处理程序示例
2021-07-06 05:58:51
![](https://img.aspxhome.com/file/2023/5/104395_0s.jpg)
关于MySQL编码问题的经验总结
2007-08-23 16:10:00
WEB页面工具之语言XML的定义
2008-05-29 11:29:00
Vue如何获取url路由地址和参数简单示例
2024-05-09 09:53:08
![](https://img.aspxhome.com/file/2023/4/127164_0s.png)
Python代码实现列表分组计数
2022-11-03 07:58:38
![](https://img.aspxhome.com/file/2023/7/83737_0s.jpg)
python中PS 图像调整算法原理之亮度调整
2021-02-09 17:51:01
某年第一周开始日期sql实现方法
2012-02-25 20:02:30
Golang在Mac、Linux、Windows下如何交叉编译的实现
2024-02-23 06:00:02
解决新django中的path不能使用正则表达式的问题
2021-06-09 18:45:21
Python多进程multiprocessing、进程池用法实例分析
2022-05-20 00:01:29
![](https://img.aspxhome.com/file/2023/0/105230_0s.png)
python通过wxPython打开一个音频文件并播放的方法
2021-10-20 16:15:08
webstorm中配置nodejs环境及npm的实例
2024-05-11 10:16:09
![](https://img.aspxhome.com/file/2023/5/125715_0s.jpg)