시계 만들기

JS를 이용해서 시계를 만들어 보겠다.

 

html 에서 h2 엘리먼트를 하나 만들어준다.

 

<h2 id="clock">00:00</h2>

 

시간 함수 만들기

 

JS에서 querySelector로 선택자를 지정해주고 함수를 만들어준다.

 

const clock = document.querySelector("h2#clock");

function getclock() {
  const date = new Date();
  const hour = date.getHours()
  const minute = date.getMinutes()
  const seconde = date.getSeconds()

  clock.innerText = `${hour}:${minute}:${seconde}`;
}

new Date() : 현재 시간을 알려준다.

getHours(), getMinutes(), getSeconds() 는 현재시간에서 시, 분, 초를 뜯어 가져오는것이다.

 

그외에 다른 매서드를 알고싶으면 아래의 사이트를 참고하면 된다.

Date - JavaScript | MDN

 

하지만 이렇게 하면 시, 분, 초가 한자리 수 일경우 앞에 0이 나타나지 않는다.

이럴경우 padStart를 이용해서 앞에 0의 자리를 만들어주면 된다. 

 

padStart 사용하기

 

padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다.

 

function getclock() {
  const date = new Date();
  const hour = String(date.getHours()).padStart(2, "0");
  const minute = String(date.getMinutes()).padStart(2, "0");
  const seconde = String(date.getSeconds()).padStart(2, "0");

  clock.innerText = `${hour}:${minute}:${seconde}`;
}

이렇게 코드를 바꾸어 줄 수 있는데 padStart()를 보면 2, "0"이 매개변수로 있다.

의미는 글자 수가 2보다 낮을경우 앞에서부터 "0"을 채워넣는다는 의미이다.

그리고 padStart앞에 String을 사용했는데 그 이유는 padStart는 string 타입을 사용해야 되기 때문이다.

 

setInterval 사용해서 불러오기

시계는 1초마다 바뀌기 때문에 JS를 이용해서 매초마다 불러와야한다. 

getclock();
setInterval(getclock, 1000);

그래서 setInterval을 이용해서 getclock함수를 1000ms마다 불러오도록 하면 완성된다.

 

 

전체코드

const clock = document.querySelector("h2#clock");

function getclock() {
  const date = new Date();
  const hour = String(date.getHours()).padStart(2, "0");
  const minute = String(date.getMinutes()).padStart(2, "0");
  const seconde = String(date.getSeconds()).padStart(2, "0");

  clock.innerText = `${hour}:${minute}:${seconde}`;
}
getclock();
setInterval(getclock, 1000);