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>
<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 = "页面已经载入,正在跳转...";
}
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 = "页面已经载入,正在跳转...";
}
效果：
