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

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


<script>
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" > 

이렇게 해주면 된다.
setTimeout 뒤에 있는 500은 500ms(밀리세컨드) 단위로 새로 시작한다는 뜻이다.
일반적으로 (php에서도 마찬가지..)

$t=date();

이렇게 쓰면 변수 $t에는 코드가 실행될 당시의 시간이 기록되므로 그냥 고정된 값이되고 말지만 setTimeout 기능이 함수를 주기적으로 반복해서 재 시작하게 하므로 마치 시계가 작동하는 것 처럼 보인다. 하지만 실제로는 켬퓨터의 시간값을 가져온 것에 불과하다.

이 숫자를 1000으로 바꾸면 2초단위로 변경된다.

onload="startClock()"

이것은 다른 태그에 써 넣어 보았지만 작동하지 않았다.
테스트는 해보지 않았지만 만일

onclick="startClock()"

이렇게 바꾼다면 가능할 것이다.
물론 이때에는 클릭해야만 시계가 나타날 것이다.
현재는 날자와 시간이 ‘Y-m-d H:i:s’ format으로 표시되지만 잘 응용하면 다른 포맷으로도 나타낼 수 있을 것이다.

소셜댓글

Loading Disqus Comments ...

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.