html 타이머

22 Sep 2023

javascript

HTML을 사용하여 간단한 카운트다운 타이머를 만들 수 있습니다. 이 타이머를 사용하면 웹 페이지에서 시간을 계산하고 표시할 수 있습니다. 아래는 HTML과 JavaScript를 사용하여 구현된 간단한 타이머 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <title>HTML 타이머</title>
  <script>
    function startTimer(duration, display) {
      var timer = duration, minutes, seconds;
      setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
          timer = duration;
        }
      }, 1000);
    }

    window.onload = function () {
      var fiveMinutes = 60 * 5, // 5분으로 타이머 설정
          display = document.querySelector('#timer');
      startTimer(fiveMinutes, display);
    };
  </script>
</head>
<body>
  <h1>HTML 타이머</h1>
  <p id="timer">05:00</p>
</body>
</html>

위의 예제는 5분 동안의 간단한 카운트다운 타이머를 구현하고 있습니다. 스크립트에서 startTimer 함수는 지정된 시간(초) 동안 카운트다운을 진행하며, 이를 화면에 표시하기 위해 innerHTML을 사용합니다.

window.onload 이벤트를 사용하여 페이지가 로드될 때 타이머가 자동으로 시작되도록 설정하였습니다. querySelector 메소드를 이용하여 timer 아이디를 가진 엘리먼트를 선택하고, 이를 display 변수에 할당하여 텍스트를 업데이트합니다.

이 예제를 실행하면 웹 페이지에 5분 동안의 카운트다운 타이머가 표시됩니다. 필요에 따라 타이머의 시간을 조정하고, 디자인을 수정하여 웹 페이지에 적용할 수 있습니다.

#HTML #JavaScript