| 阿七 |
2006-04-03 14:41 |
如何在网页上实现进度条 A[/_}bI|
出处 %
|6t\[gn
]w3- No
进度条的实现可以通过下面的javascript实现： 44uM:;
<table align="center"><tr><td> h\jV@g$
<div style="font-size:8pt;padding:2px;border:solid black 1px"> IEx`W;V]K
<span id="progress1"> </span> 4 oY<O
<span id="progress2"> </span> +w(sDH~kd
<span id="progress3"> </span> F~Nm
Lm
<span id="progress4"> </span> Z*Sa%yf
<span id="progress5"> </span> DNP %]{J
<span id="progress6"> </span> [ 7K-L6X
<span id="progress7"> </span> .,)C^hs@
<span id="progress8"> </span> AgOw{bJ%
<span id="progress9"> </span> ;*3OkNxa3
</div> L(p{>Ykcc
</td></tr></table> Mr5E\~ K>s
<script language="javascript"> =~)J:x\F
var progressEnd = 9; // set to number of progress <span>'s. 'T(7EL3$}
var progressColor = 'blue'; // set to progress bar color X~aD\%kC7
var progressInterval = 1000; // set to time between updates (milli-seconds) I:6N?lD4}0
RXMzwk
var progressAt = progressEnd; + _=&7
var progressTimer; W?a{3B
function progress_clear() { [fN?=,8
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; ]et4B +=i
progressAt = 0; sh $mOy
} uF xrv
function progress_update() { E0;KTcZi
progressAt++; h$#QRH
if (progressAt > progressEnd) progress_clear(); ~$#"'Tl4J
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; < ,U=w[cH
progressTimer = setTimeout('progress_update()',progressInterval); `0l)\
} ;Z\1PwT
function progress_stop() { ^4Nk13
clearTimeout(progressTimer); OnNWci|7
progress_clear(); "62vwWrwO
} j2V"w&>b}
progress_update(); // start progress bar o:H^
L,<Tl
</script> & PHejG_#
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); [>5<&[A
定时器函数来实现的。 |
|