网站进度条(js)
2016-06-16来源:

<table align=center><tr><td>

<div style=font-size:8pt;padding:2px;border:solid black 1px>

<span id=progress1>&nbsp; &nbsp;</span>

<span id=progress2>&nbsp; &nbsp;</span>

<span id=progress3>&nbsp; &nbsp;</span>

<span id=progress4>&nbsp; &nbsp;</span>

<span id=progress5>&nbsp; &nbsp;</span>

<span id=progress6>&nbsp; &nbsp;</span>

<span id=progress7>&nbsp; &nbsp;</span>

<span id=progress8>&nbsp; &nbsp;</span>

<span id=progress9>&nbsp; &nbsp;</span>

</div>

</td></tr></table>

<script language=javascript>

var progressend = 9; // set to number of progress <span>'s.

var progresscolor = 'blue'; // set to progress bar color

var progressinterval = 1000; // set to time between updates (milli-seconds)

var progressat = progressend;

var progresstimer;

function progress_clear() {

for (var i = 1; i <= progressend; i++) document.getelementbyid('progress'+i).style.backgroundcolor = 'transparent';

progressat = 0;

}

function progress_update() {

progressat++;

if (progressat > progressend) progress_clear();

else document.getelementbyid('progress'+progressat).style.backgroundcolor = progresscolor;

progresstimer = settimeout('progress_update()',progressinterval);

}

function progress_stop() {

cleartimeout(progresstimer);

progress_clear();

}

progress_update(); // start progress bar

</script>

实现的原理就是通过修改spanid的backgroundcolor 值和settimeout('progress_update()',progressinterval);

推荐信息
Baidu
map