타이머 만들기 (스톱워치)

타이머 만들기 (스톱워치)

안녕하세요! 오늘은 타이머를 만드는 방법에 대해 알려드리려고 합니다. 이 타이머는 스톱워치로 사용할 수도 있습니다. 이제 한번 시작해볼까요?

HTML 구조

먼저, 타이머를 만들기 위해 필요한 HTML 구조를 만들어주세요. 아래와 같은 구조를 사용하겠습니다.

<div id="timer">
  <span id="hours">00</span>:
  <span id="minutes">00</span>:
  <span id="seconds">00</span>
</div>

<button id="start">Start</button>
<button id="pause">Pause</button>
<button id="reset">Reset</button>

CSS 스타일링

HTML 구조를 만들었으면, 이제 CSS 스타일링을 통해 타이머를 꾸며줍시다.

#timer {
  font-size: 48px;
  margin-bottom: 20px;
}

button {
  font-size: 24px;
  padding: 10px 20px;
  margin-right: 10px;
}

JavaScript 로직

이제 마지막으로 JavaScript 코드를 작성하여 타이머를 동작시키겠습니다.

// 타이머 변수 초기화
let hours = 0;
let minutes = 0;
let seconds = 0;

// 페이지 로드 시 타이머 업데이트
function updateTimer() {
  document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
  document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
  document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
}

// 타이머 시작
let timerId;
document.getElementById('start').addEventListener('click', function() {
  timerId = setInterval(function() {
    seconds++;
    if (seconds === 60) {
      seconds = 0;
      minutes++;
      if (minutes === 60) {
        minutes = 0;
        hours++;
      }
    }
    updateTimer();
  }, 1000);
});

// 타이머 일시정지
document.getElementById('pause').addEventListener('click', function() {
  clearInterval(timerId);
});

// 타이머 초기화
document.getElementById('reset').addEventListener('click', function() {
  clearInterval(timerId);
  hours = 0;
  minutes = 0;
  seconds = 0;
  updateTimer();
});

// 초기 타이머 표시
updateTimer();

결론

위의 코드를 사용하여 타이머 (스톱워치)를 만들었습니다. HTML, CSS, JavaScript를 조합하여 타이머를 동작시킬 수 있습니다. 유저들은 시작, 일시정지, 초기화 버튼을 눌러 타이머를 조작할 수 있습니다.

이제 여러분도 직접 타이머를 만들어보세요! 직관적인 사용자 경험과 함께 기능적인 타이머를 구현할 수 있을 것입니다.