[JavaScript] 자바스크립트 - 시간 다루기 (setInterval(), padStart() )

 

현재 시간을 15:34:26 (시/분/초) 이렇게 디지털 형식으로 표시하기 위해서

다음과 같은 Date 객체의 메소드를 사용하면 된다. 

⏰ getHours()                // 시간(Hour)
⏰ getMinutes()             // 분(Minute)
⏰ getSeconds()             // 초(Second)
⏰ getMilliseconds()      // 밀리초(Milliseconds)

 

 

Date 객체를 먼저 선언한 후 이 메소드를 실행하기만 시간을 가져올 수 있다. 

이렇게 가져온 시간을 화면에 출력하게 되면 Date 객체를 선언했을 때의 시간이 출력이 되고 바뀌지 않는다. 

진짜 디지털 시계처럼 매초마다 시간을 변경해주기 위해서 정해진 시간마다 실행되는 setInterval() 함수를 이용하자!

 

 

 

 

🎈 setInterval( ) 함수 사용법

 

첫 번째 매개변수에는 일정시간마다 실행할 함수의 이름을 넣어주고,

두 번째 매개변수에는 초 간격을 넣어준다. (1초 : 1000)

setInterval(getClock, 1000);

 

 

 

코드 

//시간을 표시할 html 요소 불러오기
const clock = document.querySelector("h2#clock");  

//현재 시간을 불러오는 함수 
function getClock() { 
    const date = new Date();

    clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}

//setInterval 함수를 이용하여 1초마다 getClock() 실행
setInterval(getClock,1000);

 

 

 

📌 setInterval( )와 setTimeout( ) 차이 

      setInterval( 함수, 5000 )은 5초마다 함수가 계속해서 실행되지만 

      setTimeout( 함수, 5000 )은 프로그램이 실행되고 5초 후 딱 한 번 실행된다. 

 

 

 

 

---

📌 getStart 함수

 

9:20:7 >>> 09:20:07

 

여기서 쪼오끔만 더 응용을 해보자면 위의 코드대로 실행하면 시간은 

9:20:7 (시/분/초) 이렇게 출력된다. 하지만 보통 우리가 보는 디지털 시계는 

09:20:07 (시/분/초) 이렇게 한 자리 수에는 앞에 0이 붙는다. 

getStart 함수를 이용하면 7 ---> 07로 자동으로 수정할 수 있다. 

 

 

 

string.padStart(자릿수, 정해둔 자릿수가 아닐 경우 앞에 추가할 문자);

 

예시

let num = "7";

console.log(num.padStart(2,"0")); 

//출력 : 07

만약 num 이 "17"이라면 두 자리 수를 만족하기 때문에 그대로 17이 출력된다. 

 

 

 

이 함수를 이용하여 수정한 코드!!

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}`;
}

getClock();
setInterval(getClock,1000);