阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 T_9o0Q k
出处 z'"Y+EWN
wAL}c(EHO
进度条的实现可以通过下面的javascript实现： y(^\]-fE
<table align="center"><tr><td> Zz b?Nbf
<div style="font-size:8pt;padding:2px;border:solid black 1px"> ekmWYQ
~
<span id="progress1"> </span> :V_UJ3xf
<span id="progress2"> </span> <zAYq=IU
<span id="progress3"> </span> N8J(RR9O
<span id="progress4"> </span> 47f \
<span id="progress5"> </span> v?%vB#A ^
<span id="progress6"> </span> A<( DYd1H
<span id="progress7"> </span> Qam48XZ >
<span id="progress8"> </span> 1<*U:W
$g
<span id="progress9"> </span> Io&HzQW^a
</div> }Fox
</td></tr></table> ,g,Hb\_R)
<script language="javascript"> .;l`V
WP
var progressEnd = 9; // set to number of progress <span>'s. G!h7 5G20
var progressColor = 'blue'; // set to progress bar color Y hC|hDC
var progressInterval = 1000; // set to time between updates (milli-seconds) (=EDqAZg
JZ&_1~Z=
var progressAt = progressEnd; cL~Y QJYp
var progressTimer; .*.eY?,V
function progress_clear() { rUAt`ykTmN
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; WJ[>p
ELT,
progressAt = 0; SQ/HZ
} #VVfHC y
function progress_update() { ErQ6a%~,
progressAt++; "^
;h'
if (progressAt > progressEnd) progress_clear(); i$<")q
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor;
;Me*# /
progressTimer = setTimeout('progress_update()',progressInterval); Q;A\M
} ts=:r
function progress_stop() { Uqy/~n-v<
clearTimeout(progressTimer); 6<R[hIWpZ}
progress_clear(); W8;!rFW
} x}V&v?1{5
progress_update(); // start progress bar `u PLyS.
</script> p8?v
o ?^
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); het <#3Bo
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
