如何在网页上实现进度条网站建设常州五颜六色网络技术有限公司

常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条

登录 -> 注册 -> 回复主题 -> 发表主题

阿七

2006-04-03 14:41

如何在网页上实现进度条 -^v}T/Kl#
出处 (L%q/ $
[t{#@X
进度条的实现可以通过下面的javascript实现： \[1CDz=}1
<table align="center"><tr><td> !#1A7[WN
<div style="font-size:8pt;padding:2px;border:solid black 1px"> P1stL,
<span id="progress1"> </span> j9'XZq}
<span id="progress2"> </span> )OC[;>F7
<span id="progress3"> </span> % T\N@
<span id="progress4"> </span> #l#[\6
<span id="progress5"> </span> KxmPL
<span id="progress6"> </span> Q0Qm0B5eY
<span id="progress7"> </span> 2Q|*xd4B^
<span id="progress8"> </span> 3}{5 X'
<span id="progress9"> </span> e uHu}
</div> #UC QiQfP
</td></tr></table> zy6(S_j
<script language="javascript"> #aY<J:Nx
var progressEnd = 9; // set to number of progress <span>'s. fhIj+/{_O
var progressColor = 'blue'; // set to progress bar color $1zeY6O
var progressInterval = 1000; // set to time between updates (milli-seconds) W<|K
oEoJa:h
var progressAt = progressEnd; [j]J_S9jJ
var progressTimer; &9w%n
function progress_clear() { m4SXH> o
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; p UMB)(<k
progressAt = 0; qL5#.bR
} D4O5@KfL
function progress_update() { J*~2:{=%
progressAt++; R5&$h$[/
if (progressAt > progressEnd) progress_clear(); %^?3s5PXD
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; :Mu8W_
progressTimer = setTimeout('progress_update()',progressInterval); u4,X.3V]A
} ?~JxO/K
function progress_stop() { 4IP\iw#w
clearTimeout(progressTimer); JlDDM %
progress_clear(); Q@W|GO H3
} CziaxJ
progress_update(); // start progress bar M`+e'vdw
</script> 56=K@$L {F
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); 3pTS@
定时器函数来实现的。