화면에 현재 시간을 보여주는 시계 구현하기
<h2 id="clock">00:00:00</h2>html에 #clock인 h2를 추가했다.
const clock = document.querySelector("#clock");
function getClock() {
const date = new Date();
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
getClock();
setInterval(getClock, 1000);
#clock인 h2를 clock으로 선언했다.
Date객체는 현재 시간과 날짜를 보여준다.
Date()
:함수로 호출 시 'Fri Oct 15 2021 16:07:14 GMT+0900 (한국 표준시)'를 보여준다.
new Date()
:new Date() 생성자로 호출할 경우 새로운 Date 객체를 반환한다.
//함수 getClock()
Date 객체를 생성자로 호출하여 date로 선언했다.
date객체는 date.getHours(), date.getMinutes(), date.getSeconds()로
시분초를 각각 반환할 수 있다.
그런데 반환 된 결과물은 숫자 (Number)다.
문자 보간을 사용해 시, 분, 초를 매초마다 반환해서 돌아가는 시계로 보여주려 했는데
값이 숫자이기 때문에 String()으로 감싸주어 문자로 만들어주었다.
위의 결과로 보여지는 시간은 1시~9시의 경우 2자리 수가 아닌 한자리 수로 보이기 때문에
.padStart(2, "0")으로 2자리수 숫자로 만들면서 비어있는 앞부분을 0으로 채웠다.
(반대: .padEnd() 뒷부분에 채워야하는 경우)
그리고 최종적으로 문자보간을 사용해서 h2의 innerText를${hours}:${minutes}:${seconds} 로 작성했다.
1초마다 반환하는 시계로 만들기 위해서 setInterval()을 사용했다.
setInterval이 1초마다 돌아가게 했기 때문에
화면을 로드했을 때 1초 뒤에 시계가 돌아가는 현상이 있었고
이를 수정하기 위해 getClock()함수를 먼저 호출 한 뒤에
setInterval()이 호출되도록 했다.
js로 시계를 돌릴 수 있구나..!
엄청 노가다구나..!!
