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

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

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

阿七

2006-04-03 14:41

如何在网页上实现进度条 pLQSG}N
出处 O)xEF~DaD
As'M39*V
进度条的实现可以通过下面的javascript实现： xbrmPGpW$
<table align="center"><tr><td> abaQJ|
<div style="font-size:8pt;padding:2px;border:solid black 1px"> @`;Y/',
<span id="progress1"> </span> {,f!'i&b@
<span id="progress2"> </span> kE_@5t7O{
<span id="progress3"> </span> Gr#rM/AfCK
<span id="progress4"> </span> ^s @*ISY
<span id="progress5"> </span> mrhp)yF
<span id="progress6"> </span> 22/?JWL>
<span id="progress7"> </span> bj7MzlGFy
<span id="progress8"> </span> +:"6`um|
<span id="progress9"> </span> 32 1={\X
</div> a4jnu:e
</td></tr></table> Wt+y-ES
<script language="javascript"> loC5o|Wh
var progressEnd = 9; // set to number of progress <span>'s. E7yf[/it
var progressColor = 'blue'; // set to progress bar color B)*#g
var progressInterval = 1000; // set to time between updates (milli-seconds) zK>'tFU
[t
var progressAt = progressEnd; [)H,zpl
var progressTimer; Y-%l7GErhL
function progress_clear() { c#n4zdQd]5
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; !k:zLjtp
progressAt = 0; UL)"
} ^/%o%J&Hz
function progress_update() { z<oE!1St
progressAt++; co<2e#p;
if (progressAt > progressEnd) progress_clear(); )l!J$X+R
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; Y|m_qB^_
progressTimer = setTimeout('progress_update()',progressInterval); bIb6 yVnHi
} +Q SxYV
function progress_stop() { "$~}'`(]
clearTimeout(progressTimer); ^I(oy.6?=p
progress_clear(); ,#E3,bu6_4
} V6@*\+:3)
progress_update(); // start progress bar 6z9R1&~%
</script> u#41osUVW>
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); |&elZ}8
定时器函数来实现的。