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

간혹 서버시간을 실시간으로 사용자에게 보여줄 필요가 있다. 이 때 사용하기 위해 만든 것으로 자바스크립트의 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);

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

편리

PHP와 MariaDB, jQuery 등을 사용해 게시판, 쇼핑몰 솔루션을 개발합니다. 그누보드5와 영카트5 개발에 참여 했습니다. Linux와 Nginx는 물론 WordPress, Git 등에도 관심이 많습니다. 자전거 타기 및 사진 촬영을 취미로 하고 있습니다.

카카오톡 플러스친구 채팅 : NCUBE.NET

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.