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
0
投稿

猜你喜欢

  • asp #include file 与 #include virtual 的区别小结第1/2页

    2011-04-02 11:17:00
  • 抛砖引玉Web2.0设计指南

    2008-06-30 12:49:00
  • JavaScript缓动库

    2009-05-25 12:50:00
  • 初学js者对javascript面向对象的认识分析

    2011-03-16 11:04:00
  • MySql 随机取N条数据

    2009-03-17 12:46:00
  • Date()与new Date()的区别

    2008-09-29 11:09:00
  • Asp 单页查询数据库

    2010-05-11 20:11:00
  • asp精妙的SQL语句例子

    2008-03-04 17:42:00
  • 先学会为自己做设计

    2008-06-01 16:32:00
  • 精简高效的CSS命名准则和方法

    2010-09-17 18:38:00
  • Asp WinHttp.WinHttpRequest.5.1 对象使用详解

    2012-05-02 10:15:27
  • 如何正确编写高质量高性能的MySQL语法

    2008-11-27 15:43:00
  • FLASH 全屏播放

    2008-07-19 11:36:00
  • XHTML与HTML之间的7个区别

    2009-05-20 10:13:00
  • 在SQL Server中使用索引的技巧

    2009-02-24 17:50:00
  • 牢不可破的九宫格布局

    2009-07-24 12:40:00
  • 利用xslt对xml进行缩进格式化处理

    2008-09-04 10:34:00
  • asp IsValidEmail 验证邮箱地址函数(email)

    2011-03-03 10:42:00
  • 客户端数据存储–超越cookies

    2008-01-15 13:01:00
  • JS实现css边框样式设置工具

    2008-05-25 16:22:00
  • asp之家 网络编程 m.aspxhome.com