중요 키 포인트

setInterval()

setInterval(getClock,1000);

setInterval 는 함수를 설정한 시간에 지속적으로 실행 되도록 도와주는 함수 이다.

new Date()

 const date = new Date();

시간등을 사용하고 싶을때 new Date 를 먼저 변수로 설정 해주어야한다.

String ()

  const hours = String(date.getHours()).padStart(2,"0");
  const minutes = String(date.getMinutes()).padStart(2,"0");
  const seconds = String(date.getSeconds()).padStart(2,"0");

String() 함수는 다른 타입을 문자열로 변환해주는 함수 이다.

PadStart()

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

PadStart() 를 사용하면 비어있는 문자열을 메꿔줄수 있다. 첫번째에는 채워질 문자열의 숫자 두번째는 어떤 문자로 채우고 싶은지 넣는다.

시계 만들기

const clock = document.getElementById("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);

1. html에 있는 Id를 자바스크립트로 불러와 clock 변수로 만들어준다.
2. getClock() 함수를 만든다.
3. const date = new Date(); 로 시간을 설정할수 있게 가져온다.
4. const hours, minutes, seconds 를 각각 getHours, getMinutes, getSeconds로 변수를 만들어 준다.
5. 각각의 변수들을 String 으로 감싸줘서 문자열로 만들고 padStart를 사용하여 각각의 시,분,초가 0으로 채워 지게 만들어준다.
6. html에서 불러온 clock.innerText 에 hors, minutes, seconds를 설정하여 html에 보이게 한다.
7. getClock()로 시작하여 시계가 페이지가 불러오는 순간 바로 작동되게 해준다.
8. setInterval() 함수를 이용하여 getClock 이 매1초마다 계속 작동되게 해준다.