[JS] 서버시간을 화면에 실시간으로 표시하기

2015-04-07 by 편리

간혹 서버시간을 실시간으로 사용자에게 보여줄 필요가 있다. 이 때 사용하기 위해 만든 것으로 자바스크립트의 setInterval 을 사용해서 비교적 간단하게 구현할 수 있다. 아래는 기능을 수행하는 코드이다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> 서버시각 표시 </title>
</head>

<body>
    <div id="server_time"><?php echo date("Y-m-d H:i:s", time()); ?></div>

<script>
var srv_time = "<?php print date("F d, Y H:i:s", time()); ?>";
var now = new Date(srv_time);

setInterval("server_time()", 1000);

function server_time()
{
    now.setSeconds(now.getSeconds()+1);

    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var date = now.getDate();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    if (month < 10){
        month = "0" + month;
    }

    if (date < 10){
        date = "0" + date;
    }

    if (hours < 10){
        hours = "0" + hours;
    }

    if (minutes < 10){
        minutes = "0" + minutes;
    }

    if (seconds < 10){
        seconds = "0" + seconds;
    }

    document.getElementById("server_time").innerHTML = year + "-" + month + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
}
</script>
</body>
</html>

데모 : http://codepub.net/js/servertime.php

위 코드에서 아래 코드 부분이 서버시각으로 현재 시각을 설정하는 부분이다.

var srv_time = "<?php print date("F d, Y H:i:s", time()); ?>";
var now = new Date(srv_time);

그런 다음 server_time 함수를 1초마다 반복 실행하기 위해 setInterval 메소드를 사용했다.

setInterval("server_time()", 1000);

아래의 코드가 반복실행 때 1초 씩 시간을 증가시키는 부분이다.

now.setSeconds(now.getSeconds()+1);

이런 식으로 코드를 작성해서 서버 상에 올려 실행해보면 데모처럼 서버의 시각이 실시간으로 표시가 된다.

Leave a Reply Cancel reply