📌 어떠한 요소 안에 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초)
