阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 G#f3
WpD
出处 1ljcbD)T;
#H
|p)2k
进度条的实现可以通过下面的javascript实现： C2
zKt /)A
<table align="center"><tr><td> wx BZ+UP_
<div style="font-size:8pt;padding:2px;border:solid black 1px"> z{PPPFk4J
<span id="progress1"> </span> sK9RViqF\
<span id="progress2"> </span> )M Tf
<span id="progress3"> </span> _
M B/p
<span id="progress4"> </span> 0 |?N
<span id="progress5"> </span>
@q># ]8
<span id="progress6"> </span> lgK5E *^
<span id="progress7"> </span> ,CPAS}kS
<span id="progress8"> </span> iFcSz
<span id="progress9"> </span> Wlq3 r#
</div> "Y5 :{Kj
</td></tr></table> T%Cj#J &L
<script language="javascript"> YwZx{%f
var progressEnd = 9; // set to number of progress <span>'s. 3fX _XH1Q
var progressColor = 'blue'; // set to progress bar color 7B5b
+
var progressInterval = 1000; // set to time between updates (milli-seconds) aR@+Qf
S1~K.<B
var progressAt = progressEnd; i PG:w+G
var progressTimer; +eKLwM
function progress_clear() { *:un+k
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; UQYHR+
progressAt = 0; xC 0y2+)|
} d ( ru5*p
function progress_update() { T$
<'ZC
progressAt++; tu{ paQ
if (progressAt > progressEnd) progress_clear(); }y J,&N'p
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; @8aV*zjB
progressTimer = setTimeout('progress_update()',progressInterval); 0
8k
} hcYqiM@ 8>
function progress_stop() { +7
j/. R
clearTimeout(progressTimer); dN:^RCFzS
progress_clear();
rf'A+q
} ePaC8sd0
progress_update(); // start progress bar i& %dwqp
</script> ' gD./|Z0
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); 28+{
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
