[JAVASCRIPT] JavaScript로 시계만들기!

See the Pen js 시계 by Shape2ee (@shape2ee) on CodePen.

자바스크립트를 이용한 시계를 만들어보았습니다.
코드는 생각보다 아주 간단합니다.

HTML 코드

<div class="clock">
  <h1 class="time">00:00:00</h1>
  <h2 class="day">요일</h2>
</div>

시간이 들어갈 부분을 기본값으로 00:00:00과 요일로 작성하였고 자바스크립트 코드로 넘어가겠습니다.

JAVASCRIPT

변수선언

const clockTime = document.querySelector(".time");
const day = document.querySelector(".day");
let date = new Date();

우선 자바스크립트로 수정해줄 h1과 h2를 상수로 선언하고
new Date() 함수를 이용하여 오늘 지금 시간을 변수에 저장합니다.

시간 변경 함수

function getClock() {
  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");
  clockTime.innerText = `${hours}:${minutes}:${seconds}`;
}

우선 함수를 실행하여 시간을 바꾸려고 하는 것 이라 함수안에 다시 new Date()로 재할당을 해주어야 합니다. 처음부터 함수안에 변수를 작성 할수 있지만, 요일을 탐색하기 위해서 함수밖에 선언하고 함수안에서는 재할당 하는 방식으로 하였습니다.

그리고 10부터 60분이나 초,10~12시는 모두 2자리의 수로 되어있는데 0부터 9까지는 한자리라 미관상 좋지 않기 때문에 두자리로 보여주기 위해서 date.getHours(), date.getMinutes(), date.getSeconds()메서드들을 문자열로 바꿔주는 String()함수로 감싸고,
그리고 padStart()메서드를 이용하여 2자리가 아닌 값은 앞에 0을 붙여주도록 하였습니다.

여기서padStart()는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환하는 메서드입니다.
사용법은 str.padStart(목표 문자열의 길이, 문자열에 채워넣을 문자열) 이러합니다.

요일 반환

      switch(today.getDay()) {
        case 0:
          day.firstElementChild.innerHTML = "일요일";
          break;
        case 1:
          day.firstElementChild.innerHTML = "월요일";
          break;
        case 2:
          day.firstElementChild.innerHTML = "화요일";
          break;
        case 3:
          day.firstElementChild.innerHTML = "수요일";
          break;
        case 4:
          day.firstElementChild.innerHTML = "목요일";
          break;
        case 5:
          day.firstElementChild.innerHTML = "금요일";
          break;
        case 6:
          day.firstElementChild.innerHTML = "토요일";
          break;
      }

일주일의 요일을 반환하는 코드는 swith()문과 .getDay()메서드를 이용하여 반환하였습니다.

setInterval()

getClock()
setInterval(getClock, 1000)

시계에 있어 가장 중요한 함수이며 setInterval()함수로 1초에 한번씩 실행이 되게 하였습니다.
하지만 setInterval()만을 이용하여 작업을 하면 처음 1초동안은 html에 기본값으로 입력한 00:00:00과 요일이 보여지기 때문에
페이지가 로드되자마자 바로 함수를 한번 실행을 하도록 getClock()함수를 따로 작성을 하였습니다.

---

참고

https://developer.mozilla.org/en-US/docs/Web/API/setInterval
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
https://nomadcoders.co