function f(){
msg('稍后...');
setTimeout("proc()",50);
} function proc()
{
//此处会有大量操作，时间需要若干秒。
msg('完成');
}
function f(){
msg('稍后...');
setTimeout("proc()",50);
} function proc()
{
//此处会有大量操作，时间需要若干秒。
msg('完成');
}
function f(){
msg('稍后...');
setTimeout("proc()",50);
} function proc()
{
//此处会有大量操作，时间需要若干秒。
msg('完成');
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="Gao YiXiang" />
<meta name="email" content="[email protected]" />
<meta name="keywords" content="javascript dhtml dom" />
<meta name="description" content="I love web development." />
<style type="text/css">
.divMessage
{
position: absolute;
left: 0px;
top: 0px;
z-index: 100;
background-color: yellow;
width: 400px;
height: 300px;
filter: alpha(opacity=70);
opacity: 0.7;
}
</style>
</head>
<body>
<input type="button" id="btnTest" value="Test" />
<div id="divOutput"></div>
<script type="text/javascript">
<!--
var oTip = document.createElement("div");
oTip.className = "divMessage";
oTip.innerHTML = "请等待...";var oFinish = document.createElement("input");
oFinish.type = "button";
oFinish.value = "关闭";function f()
{
document.body.appendChild(oTip); setTimeout(t, 50);
}function t()
{
var oOutput = document.getElementById("divOutput"); var iStart = (new Date()).valueOf();
for (var i=0; i<5000; i++)
{
// 输出很消耗时间！
oOutput.innerHTML = oOutput.innerHTML;
} oOutput.innerHTML += ((new Date()).valueOf() - iStart).toString() + " ms<br />"; oTip.innerHTML = "已完成！";
oTip.appendChild(oFinish);
oFinish.onclick = function()
{
oTip.removeChild(this);
oTip.innerHTML = "请等待...";
document.body.removeChild(oTip);
};
}document.getElementById("btnTest").onclick = f;
//-->
</script>
</body>
</html>