[javascript] Date, get, padStart 함수를 이용하여 시계만들기

 

Date 

new Date() 사용자 브라우저의 시간을 가져옵니다.

 

get 

Date객체에 내장되어있는 get함수는 종류가 다양합니다

getFullYear() - 4자리의 년도를 가져옵니다.

getMoth() - 0 ~ 11월을 가져옵니다 (0은 1월, 12월은 11월)

getDate() - 1 ~ 31일을 가져옵니다

getHours(), getMinutes(), getSeconds(), getMillSeconds(), getTime() 등이 있습니다.

 

padStart(총길이, 추가할 문자)

문자열 앞에 지정된 문자의 길이만큼 추가하는 함수입니다.

 

padEnd(총길이, 추가할 문자)

문자열 뒤에 지정된 문자의 길이만큼 추가하는 함수입니다.

 

 

new Date()로 사용자의 브라우저 시간을 가져옵니다.

getHours, getMinutes, getSeconds를 이용해 시분초를 가져와줍니다.

14:3:5 같은 시간 표시보다 두자리 수가 좋을거같아 padStart로 두자리로 맞춰줍니다. 2자리를 만들기위해 0으로 채워줍니다. padEnd를 썼다면 6초가 60초가 되겠죠? 

 

화면에 보이게 하기위해 html에 있는 #clock 의 innerText를 변경해줍니다~