一般的WEB应用中很少使用进度条的方式来提示用户“需要绍做等待”,但是有些时候,页面加载需要比较长的时间,用户看着空空的页面不知道发生了什么事情,所以就作了一个类似的进度条页面,在需要的时候调用。
首先,在调用的页面中使用如下的javascript脚本。
function openguagepage() {//使用 showModalDialog显示页面进度。
var returnvalue=window.showModalDialog("../所在路径../guage.htm","","dialogHeight:100px;dialogWidth:270px;center:yes;status:no;help:no;scroll:no;");
}
其次,在WEB项目的对应路径下新建一个Html页面,取名为guage.htm,并把下面的代码copy到新建的页面中。
##############################
<html>
<head>
<title>保存数据...</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<SCRIPT LANGUAGE="JavaScript">
function Brush(i)
{
if(i<10)
{
var aa=eval("td"+i);
aa.style.backgroundColor="blue";
var num=i+1;
setTimeout("Brush("+ num +")",100);
}
else
{
window.close();
}
}
</SCRIPT>
</head>
<body onload="Brush(0);">
<TABLE id="Table1" cellpadding="1" cellspacing="1" border="0" align="center" height="100%"
width="100%">
<TR class="editrow">
<TD colspan="10" align="center"><FONT size="2" color="black">正在保存数据,请稍候…… </FONT>
</TD>
</TR>
<TR class="editrow">
<TD id="td0" bgcolor="silver">
</TD>
<TD id="td1" bgcolor="silver">
</TD>
<TD id="td2" bgcolor="silver">
</TD>
<TD id="td3" bgcolor="silver">
</TD>
<TD id="td4" bgcolor="silver">
</TD>
<TD id="td5" bgcolor="silver">
</TD>
<TD id="td6" bgcolor="silver"> </TD>
<TD id="td7" bgcolor="silver">
</TD>
<TD id="td8" bgcolor="silver">
</TD>
<TD id="td9" bgcolor="silver">
</TD>
</TR>
</TABLE>
</body>
</html>
##############################
后话,这种方法还没有办法没有办法精确的得到页面的加载时间,完全是通过估算的方式来确定运行时间的。本文也作抛砖引玉,希望大家有更好的办法。
敬候!
(出处:http://www.sheup.com)