javascript进度条显示 JavaScript函数执行的进度

我想在执行一段JavaScript代码之前弹出一个浮动的进度条，当这段代码执行完毕后，进度条自动关闭，请问该怎么实现啊？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

你不是已经描述出过程了吗。那么用js实现一下就可以了啊。所谓关闭，无非就是 display:none;
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>进度条DEMO</title>
</head>
<body>
<div style="position: absolute; width: 100%; height: 390px; z-index: 1; top: 34px; left: 9px;" id="demo">
<p align="center">　</p>
<p align="center">　</p>
<table align="center"><tr><td>
<div style="font-size:8pt;padding:2px;border:solid black 1px">
<span id="progress1">   </span>
<span id="progress2">   </span>
<span id="progress3">   </span>
<span id="progress4">   </span>
<span id="progress5">   </span>
<span id="progress6">   </span>
<span id="progress7">   </span>
<span id="progress8">   </span>
<span id="progress9">   </span>
</div>
</td></tr></table>
<script language="javascript">
var progressEnd = 9;  // set to number of progress <span>'s.
var progressColor = 'blue'; // set to progress bar color
var progressInterval = 1000; // set to time between updates (milli-seconds)var progressAt = progressEnd;
var progressTimer;
function progress_clear() {
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent';
progressAt = 0;
}
function progress_update() {
progressAt++;
if (progressAt > progressEnd) progress_clear();
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor;
progressTimer = setTimeout('progress_update()',progressInterval);
}
function progress_stop() {
clearTimeout(progressTimer);
progress_clear();
}
progress_update();  // start progress bar
</script>
<p align="center"><b><font size="3" face="黑体">处理数据中，请稍后......</font></b></p>
</div>
<table align="center"><tr><td>
<div align="center"><input type="button" value="停止" onclick="JavaScript:progress_stop();document.getElementById('demo').style.display='none'"></div>
</td></tr></table></body>
</html>你自已再看着改。应该能够满足你的需求
你搜索一下JS Loading就可以找到结果了
你也可以把document.getElementById('demo').style.display='none';
直接写到progress_stop() 里去。这做这个DEMO为了省事直接写了。

javascript进度条 显示 JavaScript函数执行的进度

解决方案 »

javascript进度条显示 JavaScript函数执行的进度