웹 스탑워치 기능 구현하기

HTML, CSS, JavaScript를 사용하여 목표 시간을 설정하고 스탑워치를 시작하며 정지시키는 기능을 구현해보았다.

1. 설정 버튼과 목표 시간 입력
   먼저, 페이지에는 스탑워치와 관련된 요소들이 포함되어 있습니다. 설정 버튼을 클릭하면 사용자가 목표 시간(시간과 분)을 입력할 수 있도록 프롬프트 창이 뜨도록 설정했습니다. 사용자가 유효한 시간을 입력하면 목표 시간이 화면에 표시되고, 스탑워치가 작동합니다.

2. 스탑워치 기능 구현
   스탑워치는 setInterval 함수를 사용하여 1초마다 시간을 업데이트하는 방식으로 구현했습니다. 스탑워치가 시작되면 현재 시간을 기준으로 경과 시간을 계산하고, 이를 화면에 업데이트합니다. 목표 시간이 다 되면 스탑워치가 정지되고 알림 창이 뜨도록 설정했습니다.

3. 멈춤 및 다시 시작 기능
   스탑워치를 멈추고 다시 시작하면 정지한 시점부터 다시 시간이 흐르도록 구현했습니다. 멈춘 시간을 저장하여 다시 시작할 때 경과된 시간을 계산해 화면에 업데이트합니다.

이렇게 웹 스탑워치 기능을 구현하면 사용자들은 목표 시간을 설정하고 스탑워치를 통해 시간을 관리할 수 있습니다.

document.addEventListener('DOMContentLoaded', () => {
  let totalHours = 0;
  let totalMinutes = 0;
  let isRunning = false;
  let intervalId = null;
  let pausedTime = 0;

  const goalText = document.getElementById('goalText');
  const currentTimeDisplay = document.getElementById('currentTimeDisplay');
  const gauge = document.getElementById('gauge');
  const formSettingButton = document.querySelector('.form-setting');

  formSettingButton.addEventListener('click', () => {
    const userHours = parseInt(
      prompt('목표 시간(시)을 입력하세요:', totalHours),
    );
    const userMinutes = parseInt(
      prompt('목표 시간(분)을 입력하세요:', totalMinutes),
    );

    if (!isNaN(userHours) && !isNaN(userMinutes)) {
      totalHours = userHours;
      totalMinutes = userMinutes;

      goalText.textContent = `목표시간: ${totalHours}시간 ${totalMinutes}분`;
      currentTimeDisplay.textContent = `0시간 0분 0초`;

      const gaugeWidth = ((totalHours * 60 + totalMinutes) / (60 * 24)) * 100; // 하루는 1440분
      gauge.style.width = `${gaugeWidth}%`;

      isRunning = true;
      startCountdown(totalHours * 3600 + totalMinutes * 60 - pausedTime);
    } else {
      alert('유효한 숫자를 입력하세요.');
    }
  });

  function startCountdown(totalSeconds) {
    let currentTime = totalSeconds;
    intervalId = setInterval(() => {
      if (currentTime <= 0) {
        clearInterval(intervalId);
        alert('목표 시간이 다 되었습니다.');
        return;
      }

      currentTime--;

      const hours = Math.floor(currentTime / 3600);
      const remainingMinutes = Math.floor((currentTime % 3600) / 60);
      const seconds = currentTime % 60;

      currentTimeDisplay.textContent = `${hours}시간 ${remainingMinutes}분 ${seconds}초`;
    }, 1000);
  }
});

오늘의 질의 응답😎

객체지향 프로그래밍이란 무엇이고 어떻게 활용할 수 있나요?

나의 답변 😄

객체지향 프로그래밍은 현실 세계의 객체를 프로그램 내 객체로 표현하며, 데이터와 메서드를 함께 묶어 캡슐화하여 유지보수성과 재사용성을 높이는 프로그래밍 패러다임입니다. 상속과 다형성을 통해 코드 중복을 줄이고 유연한 설계를 가능케 하며, 모듈화와 협업에 용이하며 대규모 프로젝트에서도 활용됩니다.