阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 $O&N
出处 ;eJ|) *
K 5RgWP
进度条的实现可以通过下面的javascript实现： }vU^g PH
<table align="center"><tr><td> K8 /jfm
<div style="font-size:8pt;padding:2px;border:solid black 1px"> iSX HMp4V
<span id="progress1"> </span> 2Lytk OMf
<span id="progress2"> </span> *k Tj,&x[
<span id="progress3"> </span> p' 6h9/
<span id="progress4"> </span> n2dOCntN>
<span id="progress5"> </span>
n!sOKw
<span id="progress6"> </span> \PD%=~
<span id="progress7"> </span> *Kpw@4G
<span id="progress8"> </span> !u:Fn)j
<span id="progress9"> </span> {H>Tv ,v|
</div> vM-kk:n7f
</td></tr></table> Q@|"xKa
<script language="javascript"> Lr20xm
var progressEnd = 9; // set to number of progress <span>'s. r oPC
^Q
var progressColor = 'blue'; // set to progress bar color QkWEVL@uM
var progressInterval = 1000; // set to time between updates (milli-seconds) C 8do8$
I?nU+t;
var progressAt = progressEnd; {t4':{Y+
var progressTimer; oCLM'\
function progress_clear() { Bio QV47B
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; unRFc
jEa
progressAt = 0; =(~*8hJ
} uhv _'Q
function progress_update() { vR pO0qG
progressAt++; |MN2v[y
if (progressAt > progressEnd) progress_clear();
hhhxsG yv
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; uKTYb#
E7
progressTimer = setTimeout('progress_update()',progressInterval); dtj b(*x
} !HtW~8|:
function progress_stop() { qVO,sKQ{
clearTimeout(progressTimer); O;&5>
W,Z
progress_clear(); #s#BYbF
} 4H@7 t,>
progress_update(); // start progress bar ~$rSy|19
</script> Eg2SC? 5
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); <u1` o`|-
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
