setTimeout으로 간단히 처리할 수 있다.
Javascript에서의 시간처리함수에는 어떤 함수들이 사용되는지도 함께 볼 수 있다.
간단히 설명하면...
정수형으로 표시되는 시간(0.001초 단위까지 표시됨)을 초단위까지만 표시하게 한 다음
그 숫자를 60으로 나눈 나머지가 초,
그 숫자를 60으로 나눈 몫에서 다시 60으로 나눈 나머지가 분,
그 숫자를 60으로 나눈 몫에서 다시 24로 나눈 나머지가 시간,
그 숫자를 24로 나눈 몫이 일자가 된다.
화면에 출력되고 마우스가 움직일 때 이 시간표시함수가 작동되기 시작하며,
setTimeout함수에 의해 0.25초마다 무한반복 실행되는 것이다.
<html>
<head>
<SCRIPT Language="JavaScript">
<!--
var dDay = new Date("June 13, 2000 10:20:00")
function CalcRemaining()
{
var now = new Date();
var difference = parseInt(((now.getTime() - dDay.getTime()) / 1000) + 0.999);
var secs = difference % 60;
difference = parseInt(difference / 60);
var minutes = difference % 60;
difference = parseInt(difference / 60);
var hours = difference % 24;
difference = parseInt(difference / 24);
var days = difference;
document.clock.txtDays.value = days;
document.clock.txtHours.value = hours;
document.clock.txtMins.value = minutes;
document.clock.txtSecs.value = secs;
setTimeout("CalcRemaining()", 250);
}
-->
</SCRIPT>
</head>
<body onmouseover="CalcRemaining()" bgcolor="#ABCDEF">
<form name=clock>
역사적 남북 정상회담 개최후
<input size=4 name=txtDays style="border:1px solid">일
<input size=2 name=txtHours style="border:1px solid">시간
<input size=2 name=txtMins style="border:1px solid">분
<input size=2 name=txtSecs style="border:1px solid">초 경과
</form>
</body>
</html>
'Tech: > HTML·DHTML' 카테고리의 다른 글
| 웹 페이지의 아이콘(Favicon) 설정 (0) | 2008.06.26 |
|---|---|
| 선택한 값에 따라 다른 선택상자 보이기 (0) | 2008.06.26 |
| window.open의 주의사항 (0) | 2008.06.26 |
| 테이블, 입력상자의 Border Style들 (0) | 2008.06.26 |
| 입력한 Text의 byte수 체크 (0) | 2008.06.26 |
