阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 $B7c\MR
j
出处 <B>hvuCoH
zliMG=6
进度条的实现可以通过下面的javascript实现： m (o`;
<table align="center"><tr><td> hnH<m 7
<div style="font-size:8pt;padding:2px;border:solid black 1px"> y5F"JjQAa
<span id="progress1"> </span> &iZt(XD
<span id="progress2"> </span> TspX7<6r
<span id="progress3"> </span> 5D2mZ/
<span id="progress4"> </span> 7VG*Wu
<span id="progress5"> </span> _>n)HG
<span id="progress6"> </span> I ?E+
<span id="progress7"> </span> S(nQ?;9,
<span id="progress8"> </span> >F:1a\c
<span id="progress9"> </span> V8nQ/9R;
</div>
GyMN;|
</td></tr></table> _KKux3a
<script language="javascript"> rk4KAX_[
var progressEnd = 9; // set to number of progress <span>'s. jMCd`Q]K
var progressColor = 'blue'; // set to progress bar color I'^XEl?
var progressInterval = 1000; // set to time between updates (milli-seconds) \y% "tJ~N{
G[]%1
_QCO
var progressAt = progressEnd; @ *~ yVV!5
var progressTimer; J[r_ag
function progress_clear() { _>]/. w2=
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent';
04&S.#+(
progressAt = 0; I4+1P1z
} g!'
x5#]n
function progress_update() { 8{!|` b'f
progressAt++; lP)n$?u
if (progressAt > progressEnd) progress_clear(); Pv,PS.,-
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; u {&=$[;
progressTimer = setTimeout('progress_update()',progressInterval); J k`Jv;
} _Dqi#0#40p
function progress_stop() { <*z'sUh+}
clearTimeout(progressTimer); O g1\6Q
progress_clear(); &Ep$< kx8
} ":
BZZ\!
progress_update(); // start progress bar <dE~z]
P
</script> 'YG P42#
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); Z.Z31yF:f
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
