7. Clock 만들기 (PadStart)

- HTML -

변경사항X

 

 

 

- JS -

const hours = String(date.getHours()).padStart(2, "0"); 를 하여

hours라는 변하지 않는 변수에 

date.getHours()를 하여 시간을 저장하는데

String(date.getHours()) 을 하여 number를 string으로 변경해주고

padStart(2, "0")를 하여 표시되는 시간이 2글자가 안된다면 앞에 0을 추가함.

 

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

padEnd 는 현재 문자열의 끝을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환함.

padStart와 padEnd 모두 string에만 적용 가능함.

즉, number에는 적용이 안되므로 적용하고 싶다면

String()을 하여 string으로 변경해야 함.

const minutes = String(date.getMinutes()).padStart(2, "0"); 를 하여

minutes에 현재 분을 string으로 저장함.
const seconds = String(date.getSeconds()).padStart(2, "0");

seconds에 현재 초를 string으로 저장함.

clock.innerText = `${hours}:${minutes}:${seconds}`; 를 하여

clock의 innerText에 

`${hours}:${minutes}:${seconds}`를 하여

시간:분:초를 저장함.

 

 

 

- 화면 -

 

 

현재 시간이 두 글자씩 나타남.