<!---- Progress Bar ---->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>::Libmeta - Searching...</title>
<script language='javascript'>
<!--
var maxLength = 400;
/*
* 문서내의 progressBar란 객체를 초기화하여 증가를 준비한다.
* 그리고 progressBar객체를 (parameter t의 값*10)만큼의 시간동안 주기적으로
* growUp()함수를 실행한다.
*/
function execute(t) {
totalTime = t*10;
barSize=0;
document.all.progressBar.style.border = '1 solid black';
document.all.progressBar.style.height = '8';
moveNow = setInterval("growUp()",totalTime);
}
/*
* 문서내의 progressBar객체를 너비 +10씩 최종 maxLength에 지정한 길이까지 증가시킨다.
*/
function growUp() {
barSize += eval(10);
document.all.progressBar.style.width = barSize;
if(barSize >= maxLength) {
clearInterval(moveNow);
}
}
//-->
</script>
</head>
<!-- 보기좋으라고 걍 margin을 없앰 -->
<body style="margin:0;" onLoad="execute(10);">
<table width=700 height=80%>
<tr>
<td align=center valign=middle>
<!-- 이곳의 Table너비를 maxLength와 맞춰준다. -->
<table cellpadding=0 cellspacing=0 width=400>
<td><div align=center style="font:9pt dotum; color:dodgerblue;">검색중입니다...</div><br>
<!-- progress bar object -->
<div id="progressBar" style="height:10; border:0; width:0; background-color:#FFEF9F;"><img src="" height=2 width=0></div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
<!------------------------------------------------------------------
시간 t에 따른 로딩을 표시하기 위한 예제인데..
사실 실제 데이터와의 실시간적 매칭이 아닌 눈가림용이란걸 알수 있다.ㅋㅋ
다른응용도 가능할 것이며.. setInterval의 예제로 생각해도 좋을 듯..?
------------------------------------------------------------------->
'Developer > JavaScript' 카테고리의 다른 글
| SELECT Element간 ITEM이동 (0) | 2007.05.02 |
|---|---|
| 이메일 주소 검증 (0) | 2007.05.02 |
| How to use multiple window.onload events with external scripts (0) | 2007.05.02 |