欢迎访问:常州市武进区嘉泽中心小学网站 !今天是:
栏目列表
您现在的位置是:首页>>教师>>计算机技术>>网站制作技术>>文章内容
使用showModalDialog显示页面加载进度
发布时间:2008-11-20   点击:   来源:本站原创   录入者:佚名
 

        一般的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">&nbsp;
    </TD>
    <TD id="td1" bgcolor="silver">&nbsp;
    </TD>
    <TD id="td2" bgcolor="silver">&nbsp;
    </TD>
    <TD id="td3" bgcolor="silver">&nbsp;
    </TD>
    <TD id="td4" bgcolor="silver">&nbsp;
    </TD>
    <TD id="td5" bgcolor="silver">&nbsp;
    </TD>
    <TD id="td6" bgcolor="silver">&nbsp;</TD>
    <TD id="td7" bgcolor="silver">&nbsp;
    </TD>
    <TD id="td8" bgcolor="silver">&nbsp;
    </TD>
    <TD id="td9" bgcolor="silver">&nbsp;
    </TD>
   </TR>
  </TABLE>
 </body>
</html>
##############################
后话,这种方法还没有办法没有办法精确的得到页面的加载时间,完全是通过估算的方式来确定运行时间的。本文也作抛砖引玉,希望大家有更好的办法。
敬候!

附件:
    关闭窗口
    打印文档
    账号登录
    保持登录 忘记密码?
    账号与武进教师培训平台同步