티스토리 뷰

웹 개발

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

개발하는 맹꽁이 2022. 7. 10. 17:10

안녕하세요.

이번 글에서는 자바스크립트로 시계를 만들어 보도록 하겠습니다.

구현할 기능은 현재의 시간(시, 분, 초) 받아오기, 현재 시간을 계속 업데이트하기 입니다.

크롬 브라우저와 비주얼 스튜디오 코드를 사용해 만들었습니다.

 

 

1. 기본 UI

HTML로 기본적인 UI를 구성해보도록 하겠습니다.

그냥 H1 태그 하나만 있으면 됩니다.

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    <h1>00:00:00</h1>
    ...
  </body>
</html>

시간은 자바스크립트로 구할 것이기에 0으로 설정했습니다.

 

 

2. 현재 시간 가져오기

다음으로, 자바스크립트로 현재 시간을 가져와 화면에 표시하는 기능을 구현해보도록 하겠습니다.

const h1 = document.querySelector("h1");

let time = new Date();
let hour = time.getHours();
let minute = time.getMinutes();
let second = time.getSeconds();

h1.innerHTML = hour + ":" + minute + ":" + second;

document.querySelector를 이용하여 HTML의 H1 요소를 가져옵니다.

그리고 변수로 현재의 시, 분 초를 가져와서, H1 요소의 innerHTML로 지정하는 것이 위 코드가 하는 것입니다.

 

실행하면 아래와 같이 실행됩니다.

현재 시간이 표시된 것을 볼 수 있습니다.

 

하지만, 아직 문제점이 남아있습니다.

실시간으로 시간이 업데이트 되지 않는다는 것입니다.

시간을 계속 업데이트하려면 다양한 방법이 있지만 저는 setInterval 함수를 이용하겠습니다.

이 함수는 특정 시간마다 특정 코드를 실행합니다.

 

setInterval 함수를 이용하여 시간이 실시간으로 반영되도록 수정하면 이렇게 됩니다.

const h1 = document.querySelector("h1");

setInterval(() => {
  let time = new Date();
  let hour = time.getHours();
  let minute = time.getMinutes();
  let second = time.getSeconds();

  h1.innerHTML = hour + ":" + minute + ":" + second;
}, 100);

기존에 작성한 코드를 setInterval의 첫번째 인수로 넣었습니다.

두번째 인수 100은 위에서 setInterval이 특정 시간마다 실행한다고 했는데 바로 그 시간을 설정합니다.

밀리초(시간 단위 중 하나, 1000밀리초는 1초입니다.) 단위로 설정하기 때문에 100밀리초(0.1초)로 설정했습니다.

 

새로고침하면 이렇게 실행됩니다.

시간이 실시간으로 업데이트 되고 있습니다!

 

하지만, 아직도 문제가 남아있습니다.

시간이 24시간으로 표시되기 때문에 1시가 13시로 표시되고 있습니다.

그냥 내버려둘 수도 있지만, 저는 불편하기 때문에 수정하겠습니다.

const h1 = document.querySelector("h1");

function set12Hour(hour) {
  if (hour > 12) {
    return hour - 12;
  }
  return hour;
}

setInterval(() => {
  let time = new Date();
  let hour = time.getHours();
  let minute = time.getMinutes();
  let second = time.getSeconds();

  h1.innerHTML = set12Hour(hour) + ":" + minute + ":" + second;
}, 100);

24시간제를 12시간제로 바꾸는 함수를 추가했습니다.

그리고 hour 변수에 이 함수를 사용합니다.

엇? 언제 2시로 바꼈네요. 시간 참 빠릅니다.

어쨌든, 14시가 2시로 표시되고 있습니다.

 

하지만! 아직도 아직도 문제가 하나 남아있습니다.

한자리 수의 시간 앞에 0이 없어서 다른 시계와 달리 불편하게 보여지는 것입니다.

예를 들어서 2시 3분 5초가 02:03:05로 표시되지 않고 2:3:5로 표시됩니다.

 

다시 수정하면 이렇게 됩니다.

const h1 = document.querySelector("h1");

function set12Hour(hour) {
  if (hour > 12) {
    return hour - 12;
  }
  return hour;
}

function fillZero(time) {
  if (time < 10) {
    return "0" + time;
  }
  return time;
}

setInterval(() => {
  let time = new Date();
  let hour = time.getHours();
  let minute = time.getMinutes();
  let second = time.getSeconds();

  h1.innerHTML = fillZero(set12Hour(hour)) + ":" + fillZero(minute) + ":" + fillZero(second);
}, 100);

한자리 숫자 앞에 0을 붙이는 함수를 추가했습니다.

그리고 hour, minute, second 변수에 함수를 사용합니다.

앞에 0이 붙어 더 편안하게 완성되었습니다!

이제 모든 기능은 다 구현되었습니다.

 

 

3. CSS

지금 상태는 너무 없어보이죠.

CSS로 있어보이게 디자인 하겠습니다.

예쁘네요.

@import url("https://fonts.googleapis.com/css2?family=Mingzat&display=swap");

body {
  background-color: #456c99;
}

h1 {
  margin-top: 200px;
  font-size: 100px;
  text-align: center;
  font-family: "Mingzat", sans-serif;
  font-weight: normal;
  color: white;
}

구글 폰트를 가져와 사용했습니다.

CSS는 아무렇게나 해도 되니 설명은 패스하겠습니다.

 

 

이렇게 이번 글에서는 간단한 시계를 만들어보았습니다.

구독과 공감 한번씩 눌러주시면 감사하겠습니다! :)

'웹 개발' 카테고리의 다른 글

맵을 매트릭스 배열로 만들어주는 매트릭스 맵 생성기  (0) 2023.06.18
타입스크립트로 만든 지뢰찾기  (2) 2023.04.03
대신 텍스트를 반복해주는 도배도배  (2) 2022.10.29
[HTML/CSS 클론] Google 검색 페이지 클론  (2) 2022.08.19
자바스크립트로 간단한 GUI 계산기 만들기  (0) 2022.07.22
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함