JavaScript 실시간 시간 출력하기

🟰시간 출력하기에 필요한 개념

📌 어떠한 요소 안에 String타입의 변수를 출력할때
☀️ 백틱이라는 기호(``)를 써서 변수를 표현한다. 일반적으로 숫자키 옆 ~에 있다.
☀️setInterval(함수,간격) : 해당 함수를 지정한 간격만큼 두고 실행한다.
☀️ new Date()를 호출할 경우 현재 날짜와 시간을 가져옵니다.
☀️ padStart,padEnd(자릿수, 빈 공간을 채울 문자) : 자릿수만큼 문자열 공간을 지정하고 빈 공간은 지정한 문자로 채웁니다.

위 개념을 숙지하셨다면 코드를 보여드리겠습니다.
⏬코드예시

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

function getClock() {
    const date = new Date();
    const Hour = String(date.getHours()).padStart(2,"0");
    const minute = String(date.getMinutes()).padStart(2,"0");
    const seconds = String(date.getSeconds()).padStart(2,"0");


    clock.innerHTML = `${Hour}`+':'+`${minute}`+':'+`${seconds}`;
}
/* setintervla(내가실행하고자하는 함수/ 시간간격(millisecond단위)) 
    interval 은 매번 무슨 일이 일어나게 하고 싶을 때 사용한다.
*/
getClock();
setInterval(getClock, 1000) /*5초마다 실행*/ 

/* 현재 시간과 날짜를 가져온다.
문서를 보면 다양한 기능이 많다.*/

/*padStart String에 쓸수 있으며, string의 길이를 조절할 수 있다. 또한 
공백을 원하는 문자열로 챙루 수 있다.
pad를 사용할 수 있는 조건은 String이다. 잊지 말자!*/

"1".padStart(2,"0");/* "1"의 스트링 길이가 2가 되도록 하고 만약 해당 문자열이 매개변수의 
길이보다 적다면 "0"으로 채운다. */

"1".padEnd(2,"0") /*start와 달리 반대로 뒤쪽에 매개변수 2번째 인자를 값으로 채운다. */​

⏬HTML 코드

위 내용을 실행하면 시간을 시,분,초단위로 나눠서 h2에 새롭게 출력합니다.
단위는 밀리세컨드단위로 1000 밀리세컨드는 1초를 나타냅니다.(1밀리세컨드 = 1/1000초)

⏬결과

위 사진처럼 시간이 나타나며 1초마다 시간이 갱신되어 나타납니다.