页面进度条

最新推荐文章于 2025-08-07 21:48:39 发布

原创最新推荐文章于 2025-08-07 21:48:39 发布 · 524 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #button #input

javaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用纯Javascript实现的进度条示例。该进度条能够动态更新显示，并提供了开始、停止的功能，适用于需要展示任务进度的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用Javascript实现的进度条

<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>