如何在网页上实现进度条

[入库:2005年8月18日] [更新:2007年3月25日]

本文简介:选择自 hellenlong 的 blog

进度条的实现可以通过下面的javascript实现:
<table align="center"><tr><td>
<div style="font-size:8pt;padding:2px;border:solid black 1px">
<span id="progress1">&nbsp; &nbsp;</span>
<span id="progress2">&nbsp; &nbsp;</span>
<span id="progress3">&nbsp; &nbsp;</span>
<span id="progress4">&nbsp; &nbsp;</span>
<span id="progress5">&nbsp; &nbsp;</span>
<span id="progress6">&nbsp; &nbsp;</span>
<span id="progress7">&nbsp; &nbsp;</span>
<span id="progress8">&nbsp; &nbsp;</span>
<span id="progress9">&nbsp; &nbsp;</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>
实现的原理就是通过修改spanid的backgroundcolor 值和settimeout('progress_update()',progressinterval);
定时器函数来实现的。

本文关键:如何在网页上实现进度条
  相关方案
Google
 

本站最佳浏览方式为 分辨率 1024x768 IE 6.0(或更高版本的 IE浏览器)

go top