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

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

소개

이번 포스팅에서는 자바스크립트를 사용하여 타이머를 만들어 보겠습니다. 이 타이머는 스톱워치 기능을 제공하며, 시작, 일시정지, 재시작, 초기화 등의 기능을 갖추고 있습니다.

필요한 기술

• HTML: 타이머를 표시할 요소를 생성합니다.
• CSS: 타이머의 디자인을 꾸밉니다.
• 자바스크립트: 타이머의 동작을 구현합니다.

구현

1. 먼저 HTML 파일을 생성하고, 타이머를 표시할 요소를 추가합니다.

   <div id="timer">00:00:00</div>
   <button id="startBtn">시작</button>
   <button id="pauseBtn">일시정지</button>
   <button id="restartBtn">재시작</button>
   <button id="resetBtn">초기화</button>

2. CSS 파일을 생성하고, 타이머 요소의 디자인을 추가합니다.

   #timer {
     font-size: 36px;
     font-weight: bold;
     text-align: center;
     margin-bottom: 20px;
   }
   
   button {
     margin-right: 10px;
   }

3. 자바스크립트 파일을 생성하여 타이머 기능을 구현합니다.

   // 타이머 요소와 버튼 요소를 가져옵니다.
   const timerElement = document.getElementById('timer')
   const startBtn = document.getElementById('startBtn')
   const pauseBtn = document.getElementById('pauseBtn')
   const restartBtn = document.getElementById('restartBtn')
   const resetBtn = document.getElementById('resetBtn')
   
   // 변수 초기화
   let startTime, elapsedTime = 0;
   let timerInterval;
   let isRunning = false;
   
   // 타이머를 업데이트하는 함수
   function updateTimer() {
     const ms = elapsedTime % 1000;
     const sec = Math.floor(elapsedTime / 1000) % 60;
     const min = Math.floor(elapsedTime / 60000) % 60;
     const hour = Math.floor(elapsedTime / 3600000);
   
     timerElement.textContent = `${hour < 10 ? '0' + hour : hour}:` +
       `${min < 10 ? '0' + min : min}:` +
       `${sec < 10 ? '0' + sec : sec}.${ms}`;
   }
   
   // 시작 버튼 클릭 시 동작
   startBtn.addEventListener('click', function() {
     if (!isRunning) {
       startTime = Date.now() - elapsedTime;
       timerInterval = setInterval(function() {
         elapsedTime = Date.now() - startTime;
         updateTimer();
       }, 10);
       isRunning = true;
     }
   });
   
   // 일시정지 버튼 클릭 시 동작
   pauseBtn.addEventListener('click', function() {
     if (isRunning) {
       clearInterval(timerInterval);
       isRunning = false;
     }
   });
   
   // 재시작 버튼 클릭 시 동작
   restartBtn.addEventListener('click', function() {
     if (!isRunning) {
       startTime = Date.now() - elapsedTime;
       timerInterval = setInterval(function() {
         elapsedTime = Date.now() - startTime;
         updateTimer();
       }, 10);
       isRunning = true;
     }
   });
   
   // 초기화 버튼 클릭 시 동작
   resetBtn.addEventListener('click', function() {
     clearInterval(timerInterval);
     elapsedTime = 0;
     updateTimer();
     isRunning = false;
   });

마무리

이렇게 자바스크립트를 사용하여 타이머를 만들어 보았습니다. 시작, 일시정지, 재시작, 초기화 등의 기능을 갖춘 스톱워치를 구현했습니다. 이를 통해 타이머 관련 기능을 가진 웹 애플리케이션을 개발할 때 유용하게 활용할 수 있습니다.