Monday, May 21, 2007
자바스크립트, 리얼타임 시계 만들기, 1초마다 자동 갱신; JavaScript Real-time Clock
현재 날짜와 시각이 자동으로 1초 단위로 바뀌는 자바스크립트 시계입니다. 브라우저의 F5키를 눌러 웹페이지를 갱신하지 않아도 리얼타임(실시간;Real-time)으로 변경됩니다.
소스 파일명: example.html
위의 예제 소스를 example.html 이라는 파일로 저장한 후, 브라우저로 열어서 보면, 읽기전용 입력 상자 안에
2007-05-21 13:47:35
이런 식으로 현재 날짜/시간이 표시되고, 1초 단위로 저절로 갱신됩니다.
body 태그에 onload 속성을 지정해야 하기에, 블로그의 경우 특정 포스트에만 리얼타임 시계를 표시하는 것은 잘 안됩니다.
▶▶ 자바스크립트] 오늘 날짜 시간 구하기, 년월일/시분초 출력; Date Time Print JavaScript
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>
<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
tag: html
HTML | CSS | 자바스크립트 JavaScript
<< Home