[js] 현재 시간 구하기 & 출력하기

블로그 활동이 뜸해지기 시작했어요.. 정확히 알고 있는 지식으로 해보자 하여 로그인 구현을 하면서.. 음. 로그인 구현이 오래 걸린 건 아닙니다. 다만.. 호기심에 promise 적응할 겸 적용하다가 늦어졌는데, 아직 이해가 부족하다는 사실을 절실히 느끼고 블로그로 돌아왔습니다.

 

로그인 구현에서 쿠키를 안 배워서 localStorage 로 저장을 했었는데 나름 이해하거나 적응하는 쪽으로 도움이 될 수 있을 것 같아서 오늘 올리려다가 이전에 현재 시간 구하는 법을 알아보자라고 한 글을 발견하고 올립니다.

 

---

# HTML

 

일단 html 파일에 시간을 출력할 태그를 만들었습니다.

 

<h1 id="clock"></h1>

 

---

# JS

 

이어서 자바스크립트 파일에 document를 이용해서 해당 태그를 불러옵니다.

 

 

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

 

그리고 코드들을 담을 function을 만듭니다. 이후 나오는 코드들은 해당 함수 안에 있게하도록 합니다.

 

시간을 얻어오려면 Data()가 필요합니다. new를 붙어 새로운 Date객체로 생성해줍니다.

 

const date = new Date();

 

이제 이 가져온 Date 객체로 hours, minutes, seconds를 만들어줄 겁니다.

 

hours, minutes, seconds 부분만 다를 뿐 눈에 보기 편하게 변환해주고 출력하면 끝이라서 hours로 설명하겠습니다.

 

우선 문자열로 반환해야 한다. String() 안에 getHours()를 넣습니다. getHours()는 주어진 날짜의 현재 시간 기준 시로 호출합니다.

+

. getMinutes() - minutes

. getSeconds() - seconds

 

 

 

그리고,

 

 

00:00:00

이 되게끔. padStart()를 String()에다 연결하는데. padStart는 문자열의 시작부터 주어진 다른 문자열로 주어진 길이만큼 채웠습니다.

 

. padStart(길이, 다른 문자열);

 

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

 

hours만 해서 바로. innerText해도 되는데, 그러면 hours만 나올 거라서 백 틱으로 감싼 변수를 상수에 담습니다.

 

const clockDate = `${hours}:${minutes}:${seconds}`;

 

이어서. innerText 하면~

 

clockText.innerText = clockDate;

 

현재 시간 출력하는데 필요한 - function 안의 - 코드는 다 작성했습니다.

 

이제 1000초마다 실행되도록 setInterval()에 해당 function를 지정합니다. 

 

setinterval(function name, 1000);

 

setInterval(getClock, 1000);

 

마지막으로 함수를 실행하도록해주면~

 

getClock();

 

 

const clockText = document.querySelector("#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");
    const clockDate = `${hours}:${minutes}:${seconds}`;   
    clockText.innerText = clockDate;

}

setInterval(getClock, 1000);
getClock();

 

끝!