阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 Y [ =Gv6Fr
出处 n>F1G
MX
6,j6,Q(67
进度条的实现可以通过下面的javascript实现： Xp <RG p7E
<table align="center"><tr><td> eWvL(2`T x
<div style="font-size:8pt;padding:2px;border:solid black 1px"> KsM2?aqwf_
<span id="progress1"> </span> i]{M G'tg
<span id="progress2"> </span> vpOn0([hS
<span id="progress3"> </span> j_PICv *6
<span id="progress4"> </span> Fx']kn9
<span id="progress5"> </span> FHVZ/ e
<span id="progress6"> </span> y0vo-)E]-]
<span id="progress7"> </span> 0 r=:l/Pz
<span id="progress8"> </span> l^x5m]Kt
<span id="progress9"> </span> / [YH
W]
</div> b?-Ep?G'\
</td></tr></table> 7_ g}t!b`
<script language="javascript"> / g3U,?qP
var progressEnd = 9; // set to number of progress <span>'s. f/G
YDat
var progressColor = 'blue'; // set to progress bar color lJ!+n<K+
var progressInterval = 1000; // set to time between updates (milli-seconds) J2 _D P
' ypJGm
var progressAt = progressEnd; 4CO:*q G)o
var progressTimer; Hw8`/'M=%5
function progress_clear() { b'`8$;MII
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; k W Yjqv
progressAt = 0; jj8AV lN
} P`
wp`HI
function progress_update() { WZ aOw w
progressAt++; v|~ yIywf
if (progressAt > progressEnd) progress_clear(); 4-efnB
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; Z++JmD1J
progressTimer = setTimeout('progress_update()',progressInterval); B3uv>\
} +hg|!SS@5
function progress_stop() { H" f%\'
clearTimeout(progressTimer); . Rxz;-VA
progress_clear(); dL5 u- <y&
} 'bj$Z M9
progress_update(); // start progress bar j E_a
++
</script> { 4tJT25
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); wYZFW'5p
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
