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

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

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

阿七

2006-04-03 14:41

如何在网页上实现进度条 uN1O(s
出处 ^J]~&.l
>{^&;$G+*
进度条的实现可以通过下面的javascript实现： sc^TElic
<table align="center"><tr><td> eZm,K'/!
<div style="font-size:8pt;padding:2px;border:solid black 1px"> n15F4DnP
<span id="progress1"> </span> *s9 +
<span id="progress2"> </span> O&?i8XsB
<span id="progress3"> </span> gI qYIt
<span id="progress4"> </span> iy{*w&p
<span id="progress5"> </span> A-&C.g
<span id="progress6"> </span> Ii/#cdgF
<span id="progress7"> </span> >?q( )>l
<span id="progress8"> </span> UHYnl]
<span id="progress9"> </span> /,z4t f
</div> &oTUj'$
</td></tr></table> DKu4e
<script language="javascript"> YAqv:
var progressEnd = 9; // set to number of progress <span>'s. 3EN?{T<yf
var progressColor = 'blue'; // set to progress bar color vl <W`)'
var progressInterval = 1000; // set to time between updates (milli-seconds) 1;R1Fj&
|~Hlv^6H
var progressAt = progressEnd; T<"Hh.h
var progressTimer; s('<ms
function progress_clear() { ON|Bpt2Qp
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; vlAYKtl3]
progressAt = 0; z!quA7s<]
} s88lN=;
function progress_update() { _6"!y ]Q
progressAt++; _4VF>#b
if (progressAt > progressEnd) progress_clear(); +(*S@V$c
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; A>8uLO G}
progressTimer = setTimeout('progress_update()',progressInterval); y{ReQn3>y
} !SAjV)
function progress_stop() { c8I : jDk:
clearTimeout(progressTimer); L,L>cmpM
progress_clear(); 7KOM,FWKe
} T> cvV
progress_update(); // start progress bar a,3} o:f
</script> ;ZMm6o
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); #IjG[a-
定时器函数来实现的。