阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 8L
eK wb
出处 AW62~*
b+_hI)T
进度条的实现可以通过下面的javascript实现： 6w@,I;
<table align="center"><tr><td> 2\ ,e
<div style="font-size:8pt;padding:2px;border:solid black 1px"> IF^
[^^v+H
<span id="progress1"> </span> k5g@myb-
<span id="progress2"> </span> ;i}i5yv2
<span id="progress3"> </span> 6g8M7<og9R
<span id="progress4"> </span> mUiOD$rO
<span id="progress5"> </span> {DSyV:
<span id="progress6"> </span> t+jIHo
<span id="progress7"> </span> y3Y2 QC(
<span id="progress8"> </span> _J` |<}?t;
<span id="progress9"> </span> e7h\(`J0lj
</div> 3 L*+8a
</td></tr></table> 1x 8(I&i
<script language="javascript"> <Ak:8&$O
var progressEnd = 9; // set to number of progress <span>'s. iY}QgB< M
var progressColor = 'blue'; // set to progress bar color ;r%<2(
var progressInterval = 1000; // set to time between updates (milli-seconds) EQ6l:[
]}_p3W "Y9
var progressAt = progressEnd;
ysL0 hwir
var progressTimer; RFh U#
function progress_clear() { <xXiJU+
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; N&x@_t""
progressAt = 0; #j\*Lc"Ur:
} N'I?fWN!;R
function progress_update() { m=#aHF
progressAt++; ZDW,7b% U
if (progressAt > progressEnd) progress_clear(); [kVpzpGr
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; ZCj >MA
progressTimer = setTimeout('progress_update()',progressInterval); "vv$%^
} e6Wl7&@6
function progress_stop() {
Ar\IZ_Q
clearTimeout(progressTimer); 8 [vl
3C
progress_clear(); kt;}] O2%R
} B .{8/.4
progress_update(); // start progress bar rOs)B21/
</script> ZJ;wRd@
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); C~3@M<X
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
