进度条的实现可以通过下面的javascript实现:
<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>
实现的原理就是通过修改spanid的backgroundcolor 值和settimeout('progress_update()',progressinterval);
定时器函数来实现的。