날자까지 표시되는 웹페이지 용 디지털 시계-Javascript

웹 상에서 표시되는 디지털 시계가 필요해서 여기저기 검색해서 내게 알맞는 코드로 변형했다.

<script>// <![CDATA[
// 
function startClock() { // internal clock//
	var today=new Date();
	var y=today.getFullYear();
	var M=today.getMonth();
	var d=today.getDate();
	var h=today.getHours();
	var m=today.getMinutes();
	var s=today.getSeconds();
	m = checkTime(m);
	s = checkTime(s);
	M = checkDate(M);
	M = checkTime(M);
	var time=y+"-"+M+"-"+d+" "+h+":"+m+":"+s;
	document.getElementById('Display_clock').innerHTML = time;
	var t = setTimeout(function(){startClock()},500);
}

function checkTime(i) {
if (i<10) {i = "0" + i};  // add zero in front of numbers < 10 
	return i;
}

function checkDate(i) {
 	i = i+1 ;  // to adjust real month
   	return i;
}
// ]]></script>

header 위치든 어디든 저런 코드를
넣어 둔 후에
body tag 내부에

<body onload="startClock()">

이렇게 써놓고 … 표시하고 싶은 위치에

div id="Display_clock"></div>

이렇게 해주면 된다.
setTimeout 뒤에 있는 500은 500ms(밀리세컨드) 단위로 새로 시작한다는 뜻이다.
일반적으로 (php에서도 마찬가지..)
$t=date();
이렇게 쓰면 변수 $t에는 코드가 실행될 당시의 시간이 기록되므로 그냥 고정된 값이되고 말지만 setTimeout 기능이 함수를 주기적으로 반복해서 재 시작하게 하므로 마치 시계가 작동하는 것 처럼 보인다. 하지만 실제로는 켬퓨터의 시간값을 가져온 것에 불과하다.

이 숫자를 1000으로 바꾸면 2초단위로 변경된다.
[onload=”startClock()”] 이것은 다른 태그에 써 넣어 보았지만 작동하지 않았다.
테스트는 해보지 않았지만 만일 [onclick=”startClock()”] 이렇게 바꾼다면 가능할 것이다.
물론 이때에는 클릭해야만 시계가 나타날 것이다.
현재는 날자와 시간이 ‘Y-m-d H:i:s’ format으로 표시되지만 잘 응용하면 다른 포맷으로도 나타낼 수 있을 것이다.

소셜댓글

Loading Facebook Comments ...
Loading Disqus Comments ...

No Trackbacks.