페도군의 막장인생 블로그 Season 1.5: "맑은 고딕에서 가장 이쁩니다."

<span id="clock"></span>
<script type="text/javascript">
<!--
var xmlhttp;
var serverTime;
function loadXMLDoc(url) {
    xmlhttp=null;
    if (window.XMLHttpRequest)
        {// code for all new browsers
            xmlhttp=new XMLHttpRequest();
        }
    else if (window.ActiveXObject)
        {// code for IE5 and IE6
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    if (xmlhttp!=null)
    {
        xmlhttp.onreadystatechange=state_Change;
        xmlhttp.open("HEAD",url,true);
        xmlhttp.send(null);
    }
    else
    {
        alert("Your browser does not support XMLHTTP.");
    }
}

function state_Change()
{
    if (xmlhttp.readyState==4)
    {
        if (xmlhttp.status==200)
        {
            var time = xmlhttp.getResponseHeader("Date");
            var time_fix = new Date(time);
            serverTime = 
            {
                year: time_fix.getFullYear(),
                month: time_fix.getMonth(),
                date: time_fix.getDate(),
                hour: time_fix.getHours(),
                min: time_fix.getMinutes(),
                sec: time_fix.getSeconds(),
                day: time_fix.getDay()
            };
            runServerTime();
            }
        else
        {
            alert("Error: " + xmlhttp.statusText);
        }
    }
}
/* Definitions */
monthdays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
day = ['일', '월', '화', '수', '목', '금', '토'];

function runServerTime() {
    document.getElementById("clock").innerHTML = serverTime.year + "년 " + (serverTime.month + 1) + "월 " + serverTime.date + "일 " + day[serverTime.day] + "요일 " + double_figure(serverTime.hour) + "시 " + double_figure(serverTime.min) + "분 " + double_figure(serverTime.sec) + "초" ;
    setInterval(timeUpdate, 1000);
}

function timeUpdate()
{
    if(serverTime.year%400 == 0 || serverTime.year%4 == 0 && serverTime.year%100 != 0 ) { monthdays[1] = 29; }
    ++serverTime.sec;
    if(serverTime.sec > 59)
        {
            serverTime.sec = 0;
            ++serverTime.min;
        }
    if(serverTime.min > 59)
        {
            serverTime.min = 0;
            ++serverTime.hour;
        }
    if(serverTime.hour > 23)
        {
            serverTime.hour = 0;
            ++serverTime.date;
            ++serverTime.day;
        }
    if(serverTime.day > 6)
        {
            serverTime.day = 0;
        }
    if(serverTime.date > monthdays[serverTime.month])
        {
            serverTime.date = 1;
            ++serverTime.month;
        }
    if(serverTime.month > 12)
        {
            serverTime.month = 1;
            ++serverTime.year;
            if(serverTime.year%400 != 0 || serverTime.year%4 != 0 && serverTime.year%100 == 0 ) { monthdays[1] = 28; }
        }
    else
        {
            document.getElementById("clock").innerHTML = serverTime.year + "년 " + (serverTime.month + 1) + "월 " + serverTime.date + "일 " + day[serverTime.day] + "요일 " + double_figure(serverTime.hour) + "시 " + double_figure(serverTime.min) + "분 " + double_figure(serverTime.sec) + "초" ;
        }
}
function double_figure(t)
{
    if (t<10)
        {
            t="0" + t;
        }
    return t;
}
var domain_name = document.domain;
loadXMLDoc('http://' + domain_name + '/?' + (new Date()).getTime());
//-->
</script>

소개:

XMLHttpRequest를 사용하여 서버에 HEAD를 요청한 후 HEAD의 Date필드를 얻어와 시계를 표시합니다. HEAD는 문서가 로드된 후 1번만 요청되며 이후에는 timeUpdate함수가 1000ms(밀리초; 1초)마다 시간을 1초씩 증가시키고 변경된 시각을 표시, 갱신합니다.

사용방법:

id가 clock인 span태그로 감싼부분은 body태그안에 존재 해야하며, Javascript부분은 head, body태그 어느곳에 배치해도 상관없습니다.

알려진 문제점:

1. XMLHttpRequest가 HEAD를 얻고 Date필드를 분석하는데 생기는 오차시간이 있습니다. Client의 환경에 따라 오차가 커질 수 있습니다.
2. 스크립트가 오랜시간 동작하면 수ms의 오차가 있습니다. 이는 Mozilla Firefox 3에서 거의 나타나지 않았으나 Microsoft Internet Explorer 6~8에서 두드러지게 나타날 수 있습니다.

사용 예: