재밋게 응용 해 보세요.
쓰임새가 많을듯 하네요.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Jasko Sample Script </TITLE>
<META NAME="Author" CONTENT="소스창고">
<META NAME="Keywords" CONTENT="javascript, 자바스크립트, 자바">
<META NAME="Description" CONTENT="자바스크립트 소스뱅크 ">
</HEAD>
<BODY>
<!---- 아래의 코드를 <BODY> 태그와 </BODY> 태그안에 붙여 넣으세요 ---->
<table align="center"><tr><td>
<div style="font-size:8pt;padding:2px;border:solid silver 1px">
<span id="progress1"> </span>
<span id="progress2"> </span>
<span id="progress3"> </span>
<span id="progress4"> </span>
<span id="progress5"> </span>
<span id="progress6"> </span>
<span id="progress7"> </span>
<span id="progress8"> </span>
<span id="progress9"> </span>
</div>
</td></tr></table>
<script language="javascript">
var progressEnd = 9; // 사각형의 갯수
var progressColor = 'orange'; // 사각형의 색상
var progressInterval = 1000; // 속도 (밀리세컨)
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();
}
</script>
<p align=center>
<input type=button onClick="progress_update();" value=시작>
<input type=button onClick="progress_stop();" value=중지>
<!------------------------- 여기까지 ---------------------------------->
</BODY>
</HTML>