[JavaScript] 시계 만들기

 

Date(   )  

Date object는 내가 이걸 호출하는 당시의 현재 날짜랑 시간을 알려준다.

 

 

setInterval( )

 setInterval    (  실행하고자하는 함수  ,  호출되는 함수의 시간의 간격(ms)  )
ex)   setInterval(sayHello, 5000);   //5초마다

const clock = document.querySelector("h2#clock");

function getClock() {
  const date = new Date();
  clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}

// setInterval(실행하고자하는 함수, 호출되는 함수의 시간의 간격(ms) )
// setInterval(sayHello, 5000);   //5초마다

// setTimeout(함수, 얼마나 기다릴지 시간(ms단위)) //5초후에 작동
getClock();
setInterval(getClock, 1000);

padStart(string의 길이, 만약 string의 길이가 못미치면 앞에 들어갈 string)

ex)         "1".padStart(2,"0")   ------>"01"

 

만일 뒤에 문자를 넣고 싶다면 padEnd()를 사용하면 된다.

 

 

 

 

const clock = document.querySelector("h2#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}`;
}

// setInterval(실행하고자하는 함수, 호출되는 함수의 시간의 간격(ms) )
// setInterval(sayHello, 5000);   //5초마다

// setTimeout(함수, 얼마나 기다릴지 시간(ms단위)) //5초후에 작동
getClock();
setInterval(getClock, 1000);