如何在网页上实现进度条网站建设常州五颜六色网络技术有限公司

常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条

登录 -> 注册 -> 回复主题 -> 发表主题

阿七

2006-04-03 14:41

如何在网页上实现进度条 dj gk7
出处 |OQ]F
$ {yct
进度条的实现可以通过下面的javascript实现： =C %)(|
<table align="center"><tr><td> V^~RDOSy7n
<div style="font-size:8pt;padding:2px;border:solid black 1px"> m*0YMS>Y |
<span id="progress1"> </span> C=D*
<span id="progress2"> </span> XcR=4q|7
<span id="progress3"> </span> N['DqS =
<span id="progress4"> </span> Pwh}hG1sa
<span id="progress5"> </span> qpQ;,8X-"
<span id="progress6"> </span> :;?$5h*|`
<span id="progress7"> </span> ">V&{a-C4
<span id="progress8"> </span> /ViY:-8s
<span id="progress9"> </span> +{UY9_~\3
</div> XM'tIE+|
</td></tr></table> m^X51,+<
<script language="javascript"> n,I3\l9
var progressEnd = 9; // set to number of progress <span>'s. +Z`=iia>
var progressColor = 'blue'; // set to progress bar color ]jT}]9Q$
var progressInterval = 1000; // set to time between updates (milli-seconds) 6?Ncgj &@
InPE_
var progressAt = progressEnd; 1?@ HOu
var progressTimer; [ATJ! O
function progress_clear() { J[/WBVFDf
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; VcjbRpTy&
progressAt = 0; ay"jWL-
} qxZ IH
function progress_update() { )&6gju7(
progressAt++; M7#!Y=
if (progressAt > progressEnd) progress_clear(); 4uF.kz-cg
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; Okq,p=D6
progressTimer = setTimeout('progress_update()',progressInterval); =Rd`"]Mnfb
} IDct!53~
function progress_stop() { >$q
clearTimeout(progressTimer); vQWmHv\P
progress_clear(); vh,(]t
} *)m:u:
progress_update(); // start progress bar Dka,v
</script> yan^\)HZ
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); tYA@J["^
定时器函数来实现的。