阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 C)ERUH2i
出处 u}macKJmp\
T $>&[f$6
进度条的实现可以通过下面的javascript实现： iL-(O;n
<table align="center"><tr><td> B" 1 c
<div style="font-size:8pt;padding:2px;border:solid black 1px"> rr],DGg+B]
<span id="progress1"> </span> IL#"~D?
<span id="progress2"> </span> \/r}]Vz
<span id="progress3"> </span> +>6 iYUa
<span id="progress4"> </span> d;Ym=YHJtn
<span id="progress5"> </span> *K8$eDNZ
<span id="progress6"> </span> /K@XzwM
<span id="progress7"> </span> )l C)@H}
<span id="progress8"> </span> 'T*&'RQr
<span id="progress9"> </span> /=nJRC 3.
</div> C!<Ou6}!b
</td></tr></table> ~ D j8 z+^
<script language="javascript"> w e//|fA<
var progressEnd = 9; // set to number of progress <span>'s. q_[o" wq/
var progressColor = 'blue'; // set to progress bar color !Iy_UfW
var progressInterval = 1000; // set to time between updates (milli-seconds) QOGvC[*`<T
? =Z? 6fw
var progressAt = progressEnd; ~d.Y&
b
var progressTimer; C2kPMB=Xo
function progress_clear() { LYTd
TP
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; Xx~Bp+
progressAt = 0; I3L<[-ZE
} gD @) {Ip
function progress_update() { BA:VPTZq
progressAt++; xef% d
G.
if (progressAt > progressEnd) progress_clear(); | tH4:%Q'
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; Rsm^Z!sn
progressTimer = setTimeout('progress_update()',progressInterval); -$ls(oot
} Gx/Oi)&/
function progress_stop() { k(nW#*N_
clearTimeout(progressTimer); _1\v
progress_clear(); D#C~pdp
} h7Kzq{$
progress_update(); // start progress bar Se } c[|8
</script> jvL[
JI,b
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); IHac:=*Q
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
