[JS] 현재시간 불러오기

지금부터 new Date()를 사용하여 시간을 불러올 것이다.

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);

위와 같이 코드를 작성하였다. 순서대로 설명하겠다.
첫번째 줄은 html에서 id 가 clock이란 요소를 가져온 것이다.

다음으로 getClock 함수는 우선 date란 변수에 new Date()라는 JS 내장 함수를 넣어주었다.

그리고 차례로 시간, 분, 초 라는 변수에 각각의 현재 시간을 할당하였다. 이때 padStart는 문자열만 취급하기 때문에 String으로 감싸서 number 타입을 string타입으로 변경시켜주었다.

clock이란 html요소의 innerText값으로 시간:분:초를 할당하였다.

getClock();이란 함수를 먼저 실행시켜주지 않으면 처음에 html문서에서 임의로 넣어놓은 값인 00:00:00값이 나타나기 때문에 먼저 함수를 호출하고 setInterval 함수를 호출하면 이 문제가 해결된다. 
또한 setInterval(함수, ms) 함수를 통해 우리는 1000ms 마다 getClock이란 함수를 실행시켜준다. 따라서 매초 시간이 업데이트된다.

 

근데 여기서 위 코드를 단 한줄로 해결할 수 있다.

clock.innerText = new Date().toLocaleTimeString();

단, 이렇게 코드를 작성시 위 코드와의 차이점은 오후시간을 위 코드는 23시 이런식으로 표현하는 반면에,
지금 이 코드는 오전, 오후로 나타내준다.

 

여기서 padStart()란??

padStart(원하는 길이, "앞에넣을 문자");
만약 "hello".padStart(10, "0"); 을 실행시켜보자 그렇다면 실행결과는 
00000hello 가 나오게 된다.
즉, padStart는 원하는 길이만큼의 문자가 가득 차 있지 않다면 그 앞단에 두번째 인자의 문자를 채워넣어주는 것이다.
따라서 getClock()이란 함수에서 각각의 시간들을 불러와서 padStart를 통해 예를들면 초를 01, 02, 03초 이렇게 나타나게 해준다. 불러오는 과정에서 String으로 감싸서 문자열로 바꿔준 이유는 불러올때 타입이 number이기 때문에 string타입으로 바꿔준 것이다. 그렇지 않으면 padStart 사용 못함

padEnd(원하는 길이, "앞에넣을 문자")는 padStart와 반대로 뒷단에 넣어준다.

 

setInterval vs setTimeout

setInterval(sayHello, 1000);
sayHello() 라는 펑션을 1초마다 반복한다는 의미.
단 바로 실행되지 않고 1초 후 첫 시작이 되고 계속 1초마다 반복된다.

setTimeout(sayHello, 1000);
1초 기다렸다가 한번만 실행.