阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 l?%U*~*
出处 lCyp&b#(L
L~FE;*>7
进度条的实现可以通过下面的javascript实现： 'u2Qq"d+
<table align="center"><tr><td> 2tqO%8`_
<div style="font-size:8pt;padding:2px;border:solid black 1px"> ~:srm#IX
<span id="progress1"> </span> {L8 (5
<span id="progress2"> </span> \l leO|m
<span id="progress3"> </span> cNG6 A4
<span id="progress4"> </span> []M+(8Z_P
<span id="progress5"> </span> G#4cWn'
<span id="progress6"> </span> gU}? Yy
<span id="progress7"> </span> T<0Bq"'%
<span id="progress8"> </span> `'[ 7M
<span id="progress9"> </span> r(yb%p+
</div> S-h1p`
</td></tr></table> 1q! 6Sny@
<script language="javascript"> ~I>B5^3
var progressEnd = 9; // set to number of progress <span>'s. @]HV: 7<q
var progressColor = 'blue'; // set to progress bar color \?fl %r2
var progressInterval = 1000; // set to time between updates (milli-seconds) ?^&!/,
^dP@QMly6
var progressAt = progressEnd; o=_4v ^
var progressTimer; GKPqBi[rO
function progress_clear() { ?l U]J]
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; ASaG }h
progressAt = 0; v4|kiy
} Pwz^{*u]
function progress_update() { *(d^ k;
progressAt++; fp4 d?3G
if (progressAt > progressEnd) progress_clear(); k< W]VS3N
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; NnSI=M
progressTimer = setTimeout('progress_update()',progressInterval); {M E|7TS=
} ^ I,1kl~i
function progress_stop() { ;Xgy 2'3
clearTimeout(progressTimer); uD:O[H-x
progress_clear(); Q:VD 2<2
} a$t [ }D2
progress_update(); // start progress bar ?6
7j+)
</script> w6Tb<ja
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); q}BQu@'H
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
