웹 상에서 표시되는 디지털 시계( 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으로 표시되지만 잘 응용하면 다른 포맷으로도 나타낼 수 있을 것이다.
소셜댓글