2022.07.14 clock.

오늘은 시계를 만드는 중이다.

const clock = document.querySelector("h2#clock");   // 인덱스파일에서 clock을 찾고

 

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

 

//첫 줄 정의한 clock에 시간 분 초 를 불러주는 기능을 쓴다.

getClock();
setInterval(getClock,1000);

 

 

-1을 01로 만들어주는 것

 

"1".PadStart(2,"0")  // 1이란 숫자의 길이를 2만큼 늘리는데 0으로 채운다..,대충 이런뜻 하지만 기능 자체는 (내가 이해하기론) 스트링의 길이를 늘려주는 것이므로 함수를 스트링형식으로 바꿔준다.

                                                                                                                          ↙↙↙↙

시계최종본

 

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

function getClock(){
    const date = new Date();
    const hours = String(date.getHours()).padStart(2,"0");              // 이런식으로String() 감싸주면 끝.(본래형태에서)    

    const minutes = String(date.getMinutes()).padStart(2,"0");
    const secondes = String(date.getSeconds()).padStart(2,"0");
    clock.innerText = `${hours}:${minutes}:${secondes}`;
}



getClock();
setInterval(getClock,1000); //숫자는 1000이지만 1초마다 계속 보여주는것 = 실시간으로 보게 해주는 기능
                                               - 이 기능이 없다면 한번만 일어나고 만다.