블로그와 웹페이지에 텍스트 시계 넣기

블로그나 웹페이지에 시계를 넣고 싶을 때, 그림시계라면 다음 위젯뱅크나 위자트팩토리같은 위젯 사이트에서 플래시 시계 위젯을 받아 끼워넣을 수 있습니다. 코드가 간단하고 iframe형식도 아니라서 좋습니다. 다만, 플래시란 점에서 가끔 불편할 때가 있죠. 그 만큼을 받아오는 거니까.

그럴 때, 텍스트 시계라도 괜찮다면 이런 것도 있습니다. 코드 나갑니다.

<div id="TextStyleClock" ></div>
<script type="text/javascript">
var whatday = ['일','월','화','수','목','금','토'];
function refreshtime(){
var d = new Date();
var _dateA = d.getFullYear() + '년 ' + (d.getMonth() + 1) + '월 ' + d.getDate() + '일 ' + whatday[d.getDay()] +'요일<br>';
var nowhour = d.getHours();
if (nowhour < 4) {hourprefix = '밤';}
else if (nowhour < 6) {hourprefix = '새벽';}
else if (nowhour < 8) {hourprefix = '아침';}
else if (nowhour < 12) {hourprefix = '오전';}
else if (nowhour < 18 ) {hourprefix = '오후';}
else if (nowhour < 21 ) {hourprefix = '저녁';}
else  {hourprefix = '밤';}
if (nowhour > 12) nowhour = nowhour - 12;
_timeA = '<U>' + hourprefix + '</U> ' + nowhour + '시 ' + d.getMinutes() + '분 ' + d.getSeconds() + '초';
document.getElementById("TextStyleClock").innerHTML = "<font color=blue>" + _dateA + _timeA + "</font>";
}
var t = setInterval('refreshtime()', 1000);
</script>

이 결과는 아래와 같습니다.

invalid-file

쓸 만 하죠?

몇 가지 코드와 함수 설명입니다.

• setInterval 코드는 반복 실행할 함수명과 반복할 타이밍(밀리세컨드 단위)을 변수로 받습니다.
• document.getElementById 는 위에 넣은 div태그가 가리키는 엘레멘트를 찾아내는 데 사용합니다.
• 자바스크립트에서 출력한 날짜, 시각표시 코드가 그 div태그 안에 들어가는 html로 출력되도록 한 것입니다.
• body 태그에 onload 항목을 넣지 않고도 자동으로 반복실행이 됩니다.