본 튜토리얼은 전 세계 사람들이 이용할 수 있는 오픈 소스 프로젝트입니다. 프로젝트 페이지에 방문하셔서 번역을 도와주세요.
구매EPUB/PDF
튜토리얼 지도
돌아가기

setInterval을 사용한 알록달록한 시계

중요도: 4
See More

아래처럼 알록달록한 시계를 만들어 보세요.

자바스크립트는 요소 내부 시간을 업데이트할 때만 사용됩니다. 스타일을 꾸미려면 HTML·CSS를 사용하세요.

샌드박스를 열어 정답을 작성해보세요.

먼저 HTML·CSS를 만들어 줍니다.

시간을 구성하는 시, 분, 초는 각각 <span> 을 사용해 꾸밀 수 있습니다.

<div id="clock">
  <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
</div>

색을 입히기 위해서는 CSS가 필요합니다.

setInterval에 의해 매 초 호출되는 update 함수는 시각을 갱신합니다.

function update() {
  let clock = document.getElementById('clock');
  let date = new Date(); // (*)
  let hours = date.getHours();
  if (hours < 10) hours = '0' + hours;
  clock.children[0].innerHTML = hours;

  let minutes = date.getMinutes();
  if (minutes < 10) minutes = '0' + minutes;
  clock.children[1].innerHTML = minutes;

  let seconds = date.getSeconds();
  if (seconds < 10) seconds = '0' + seconds;
  clock.children[2].innerHTML = seconds;
}

(*)로 표시한 줄에서는 현재 날짜를 확인합니다. setInterval을 사용해 호출하면 지연이 생길 수 있기 때문에 신뢰성이 떨어집니다.

시계를 관리하는 함수 코드:

let timerId;

function clockStart() { // run the clock
  timerId = setInterval(update, 1000);
  update(); // (*)
}

function clockStop() {
  clearInterval(timerId);
  timerId = null;
}

update()는 clockStart() 에서뿐만 아니라 (*)로 표시한 줄에서도 호출됩니다. 양쪽 모두에서 update()를 호출하지 않으면 setInterval이 실행되기 전까지 사용자는 아무런 내용이 없는 시계를 봐야 하기 때문입니다.

샌드박스를 열어 정답을 확인해보세요.