[javascript] 자바스크립트 시계 만들기

이 포스트에서는 어떻게 실시간으로 갱신되는 자바스크립트 시계를 구현하는지 알아보겠습니다.

자바스크립트 시계에 대하여

시계는 인터넷 뱅킹이나 전자상거래 등과 같이 시간이 꼭 필요한 사이트에서 반드시 필요한 도구입니다. 여기서 자바스크립트가 웹페이지를 실시간으로 조작할 수 있게 해줌으로써 현재 시간을 보여주는 자바스크립트 시계를 만드는 것은 상당히 간단해졌습니다.

이 포스트에서는 화면을 예쁘게 보이게 하는 CSS 스타일링에 대해서는 다루지 않고, 시계를 구현하는 실질적인 자바스크립트의 코드에 초점을 맞출 것 입니다.

자바스크립트로 12 시간 시계 만들기

이제 12시간 단위로 표시되는 시계를 만들어 보겠습니다.

index.html

<div id="clock"></div>

<script src="index.js"></script>

index.js

function currentTime() {
  const date = new Date(); 
  let hh = date.getHours();
  let mm = date.getMinutes();
  let ss = date.getSeconds();
  let session = "AM";

  if (hh == 0) {
    hh = 12;
  }

  if (hh > 12) {
    hh = hh - 12;
    session = "PM";
  }

  hh = (hh < 10) ? "0" + hh : hh;
  mm = (mm < 10) ? "0" + mm : mm;
  ss = (ss < 10) ? "0" + ss : ss;

  const time = hh + ":" + mm + ":" + ss + " " + session;

  document.getElementById("clock").innerText = time; 

  setTimeout(() => currentTime(), 1000);
}

currentTime();

위의 코드를 설명하자면, 먼저 currentTime() 함수를 정의 하면서 시작을 했습니다. 함수 안에는 현재 시간을 date 변수에 저장을 했습니다. 현재 시간은 new Date() 생성자를 이용하여 얻었습니다.

const date = new Date();

그 다음 시간, 분, 초를 getHours(), getMinutes(), getSeconds() 메소드를 사용해 각각의 변수에 저장한 후 마지막으로 AM과 PM을 저장하기 위해 session 이라는 이름의 변수를 사용했습니다.

let hh = date.getHours();
let mm = date.getMinutes();
let ss = date.getSeconds();
let session = "AM";

date.getHours() 메소드는 0~23 사이의 값을 리턴합니다. 우리는 12 시간 주기의 시계를 만드는 중이기 때문에 다음의 if 문을 사용해 값 0을 12로 변경했습니다.

if (hh == 0) {
  hh = 12;
}

또한 오후를 표시하기 위해 0~23 사이의 값에 12를 빼고 session을 PM으로 할당하는 구문을 넣었습니다.

if (hh > 12) {
  hh = hh - 12;
  session = "PM";
}

이제 다음번 코드를 이해하기 위해선 몇 가지 개념에 익숙해져야 합니다.

먼저 getHours(), getMinutes(), getSeconds() 메소드는 각각 0 에서 23, 59, 59 사이의 숫자를 리턴합니다. 여기서 눈여겨 볼 것은 모두 두 자리인 숫자가 리턴되지 않는다는 점(예: 3) 입니다. 하지만 일반적인 시계에서는 모든 시/분/초가 두자리 숫자라는 점(예: 03) 입니다. 이런 문제를 해결하기 위해 삼항연산자를 사용했습니다. 이는 첫 번째 조건문이 참이면 두 번째 결과를 리턴하고 거짓이면 세 번째 결과를 리턴하는 연산자로 다음과 같은 구문을 가집니다.

(condition ? if true : if false);

이 연산자를 사용하여 숫자가 10보다 작으면 0을 추가하는 것으로 위의 문제를 해결합니다.

hh = (hh < 10) ? "0" + hh : hh;
mm = (mm < 10) ? "0" + mm : mm;
ss = (ss < 10) ? "0" + ss : ss;

다음으로 우리가 원하는 포멧으로 정리된 시간 문자열을 만들어 time 이라는 이름의 변수에 저장합니다.

const time = hh + ":" + mm + ":" + ss + " " + session;

이렇게 만들어진 문자열을 브라우저 화면에 표시하기 위해 HTML 파일에 추가했던 id가 clock인 항목을 찾아 시간을 할당합니다.

document.getElementById("clock").innerText = time;

마지막으로 실시간으로 화면이 갱신되도록 setTimeout() 메소드를 사용해 시간을 업데이트하도록 했습니다.

setTimeout(() => currentTime(), 1000);

이렇게 currentTime() 함수를 정의 했으니 마지막 줄에 이 함수를 실행하는 구문을 추가합니다.

currentTime();

자바스크립트로 24 시간 시계 만들기

24 시간 단위의 시계 코드는 이전의 코드와 아주 비슷합니다.

function currentTime() {
  const date = new Date(); 
  let hh = date.getHours();
  let mm = date.getMinutes();
  let ss = date.getSeconds();
  let session = "AM";

  if (hh > 12) {
    session = "PM";
  }

  hh = (hh < 10) ? "0" + hh : hh;
  mm = (mm < 10) ? "0" + mm : mm;
  ss = (ss < 10) ? "0" + ss : ss;

  const time = hh + ":" + mm + ":" + ss + " " + session;

  document.getElementById("clock").innerText = time;

  setTimeout(() => currentTime(), 1000);
}

currentTime();

여기서 다른 점은 시간이 0일 때 12로 바꾸는 부분과 시간이 12 보다 클 경우 12를 빼는 부분을 제거했습니다.

관련 글

현재 날짜 시간 표시

Date 사용 방법

setTimeout() 사용 방법