Monday, May 21, 2007

자바스크립트, 리얼타임 시계 만들기, 1초마다 자동 갱신; JavaScript Real-time Clock

현재 날짜와 시각이 자동으로 1초 단위로 바뀌는 자바스크립트 시계입니다. 브라우저의 F5키를 눌러 웹페이지를 갱신하지 않아도 리얼타임(실시간;Real-time)으로 변경됩니다.

JavaScript: 실시간으로 업데이트되는 시계

소스 파일명: example.html

<html>
<head>
<title>자바스크립트: 리얼타임 시계</title>
<script type="text/javascript">

function realtimeClock() {
document.rtcForm.rtcInput.value = getTimeStamp();
setTimeout("realtimeClock()", 1000);
}

function getTimeStamp() { // 24시간제
var d = new Date();

var s =
leadingZeros(d.getFullYear(), 4) + '-' +
leadingZeros(d.getMonth() + 1, 2) + '-' +
leadingZeros(d.getDate(), 2) + ' ' +

leadingZeros(d.getHours(), 2) + ':' +
leadingZeros(d.getMinutes(), 2) + ':' +
leadingZeros(d.getSeconds(), 2);

return s;
}

function leadingZeros(n, digits) {
var zero = '';
n = n.toString();

if (n.length < digits) {
for (i = 0; i < digits - n.length; i++)
zero += '0';
}
return zero + n;
}

</script>
</head>

<body onload="realtimeClock()">

<form name="rtcForm">
<input type="text" name="rtcInput" size="20" readonly="readonly" />
</form>

</body>
</html>

위의 예제 소스를 example.html 이라는 파일로 저장한 후, 브라우저로 열어서 보면, 읽기전용 입력 상자 안에

2007-05-21 13:47:35

이런 식으로 현재 날짜/시간이 표시되고, 1초 단위로 저절로 갱신됩니다.

body 태그에 onload 속성을 지정해야 하기에, 블로그의 경우 특정 포스트에만 리얼타임 시계를 표시하는 것은 잘 안됩니다.

▶▶ 자바스크립트] 오늘 날짜 시간 구하기, 년월일/시분초 출력; Date Time Print JavaScript

☞ HTML/CSS/자바스크립트(JavaScript)

0 Comments: