매 초 시간 가져오기

목표

화면에 작동하는 시계를 표시한다.

작동원리 파악

1. 시간을 화면에 가져온다.
2. 매 초마다 시간을 가져와 업데이트되게 한다.

시간 가져오기

Date - JavaScript | MDN

const date = new Date();

date.getHours(); // 시를 반환
date.getMinutes(); // 분을 반환
date.getSeconds(); // 초를 반환.

이 외에도 사용할 수 있는 여러가지 date method가 있다.

매초 시간가져오기.

매 초마다 새로 시간을 가져오게 하는 걸 사용한다.

See the Pen by jongha (@gajong) on CodePen.

1초 기다려야 하기 때문에 시간을 바로 보여주지 않는다.

getclock()을 추가해서 바로 호출하고, 매초 마다 새롭게 호출된다.

padStart()

숫자 표시 방식이 마음에 안 든다. 1 이 아니라 01 이렇게 나오게 하고 싶다.

String.prototype.padStart() - JavaScript | MDN

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

채워 넣기는 대상 문자열의 시작(좌측)부터 적용된다.

string에만 쓸 수 있는 거다.

예)

"달봉".padStart(3, "이") -> "이달봉"

길이가 2인 문자(달봉)가 3이 되지 않으면 strnig시작 앞부분을 정해진 string으로 채운다.

padEnd()는 끝쪽(오른쪽)에 추가

number를 string으로 바꿔야지 padStart를 사용할 수 있다.

See the Pen by jongha (@gajong) on CodePen.