阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 GM8Q#vc
出处 2-DG6\QX|
@ x .`z
进度条的实现可以通过下面的javascript实现： m _;fj~m
<table align="center"><tr><td> .*f 6n|
<div style="font-size:8pt;padding:2px;border:solid black 1px"> _9]vlxgtG(
<span id="progress1"> </span> z#Fel/L`O
<span id="progress2"> </span> <S=( `D
<span id="progress3"> </span> RcO"k3J
<span id="progress4"> </span> I-}ms
<span id="progress5"> </span> QJj='+R>
<span id="progress6"> </span> B~E">}=!
<span id="progress7"> </span> h
(q,T$7 W
<span id="progress8"> </span> 0zA;%oP
<span id="progress9"> </span> ImG8v[Q
E
</div> 4pl\qf
</td></tr></table> 1) ^\R(l
<script language="javascript"> v$0|\)E)
var progressEnd = 9; // set to number of progress <span>'s. 4b[bj").A
var progressColor = 'blue'; // set to progress bar color V'e%%&g~N
var progressInterval = 1000; // set to time between updates (milli-seconds) > SLQ W
>O <a9w z
var progressAt = progressEnd; umWs8-'Uw
var progressTimer; mW4Cc1*
function progress_clear() { WKiP0~
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; xh bN=L
progressAt = 0; f*<Vq:N=\
} "D8WdV(
function progress_update() { \?]U*)B. r
progressAt++; .n1&Jsey
if (progressAt > progressEnd) progress_clear(); =]]1x_GB
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; Mib .,J~
progressTimer = setTimeout('progress_update()',progressInterval); CDM6o!ur3
} @]%e L
function progress_stop() { #lrwKHZ+
clearTimeout(progressTimer); ']TWWwj$
progress_clear(); 7bk77`qWr
} /M%>M]
progress_update(); // start progress bar { 7ji m
</script> 3s/1\m%
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); nf^?X`g
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
