Js实现页面处理器

当用户请求的页面响应比较慢时，向用户提供进度信息，让他们知道系统正在处理他们的请求。

html结构：

代码

< body  onload ="BeginPageLoad();"  onunload ="EndPageLoad();" >
< form  method ="post"  action ="PageProcessor.ashx" >
     < table  border ="0"  width ="99%" >
         < tr >
             < td  align ="center"  valign ="middle" >
                 < span  id ="MessageText" > Loading Page --Please wait. </ span >
                 < span  id ="ProgressMeter" ></ span >
             </ td >
         </ tr >
     </ table >
</ form >
</ body >

 

JS代码：

代码

var iLoopCounter  =   1 ;
var iMaxLoop  =   6 ;
var iIntervalId;

function BeginPageLoad() {
    alert( ' sss ' );
     // 将浏窗口重新定向到其他页面
    window.location.href  =   " Index.aspx " ;

     // 0.5秒更新一次进度
    iIntervalId  =  window.setInterval( " iLoopCounter=UpdateProgressMeter(iLoopCounter,iMaxLoop); " ,  500 );
}

function UpdateProgressMeter(iLoopCounter, iMaxLoop) {
     // 寻找带有进度表示文本的<span>元素对象
    var progressMeter  =  document.getElementById( " ProgressMeter " );

    iLoopCounter  +=   1 ;
     if  (iLoopCounter  <=  iMaxLoop) {
        progressMeter.innerText  +=   " . " ;
         return  iLoopCounter;
    }
     else  {
         // 重置进度条
        progressMeter.innerText  =   "" ;
         return   1 ;
    }
}

function EndPageLoad() {
     // 停止计时器
    window.clearInterval(iIntervalId);

    var progressMeter  =  document.getElementById( " ProgressMeter " );
    progressMeter.innerText  =   " 页面已经载入,正在跳转... " ;
}

 

 效果：

 

转载于:https://www.cnblogs.com/lihong/archive/2010/12/25/1916543.html