javascript timer 예제

22 Sep 2023

javascript

JavaScript를 사용하여 타이머를 구현하는 예제를 소개합니다.

HTML 구조

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Timer 예제</title>
</head>
<body>
  <h1>타이머</h1>
  <p id="timer">0</p>

  <button id="start">시작</button>
  <button id="stop">정지</button>
  <button id="reset">초기화</button>

  <script src="script.js"></script>
</body>
</html>

JavaScript 구현

// 타이머 변수
let timerId;
let seconds = 0;

// 타이머 업데이트
function updateTimer() {
  const timerElement = document.getElementById('timer');
  timerElement.innerText = seconds++;
}

// 시작 버튼 클릭 이벤트 리스너
document.getElementById('start').addEventListener('click', function() {
  if (!timerId) {
    timerId = setInterval(updateTimer, 1000);
  }
});

// 정지 버튼 클릭 이벤트 리스너
document.getElementById('stop').addEventListener('click', function() {
  clearInterval(timerId);
  timerId = null;
});

// 초기화 버튼 클릭 이벤트 리스너
document.getElementById('reset').addEventListener('click', function() {
  clearInterval(timerId);
  timerId = null;
  seconds = 0;
  updateTimer();
});

동작 확인

확인을 위해 위의 예제 코드를 script.js 파일로 저장한 후, 웹 페이지에서 실행하세요. “시작”, “정지”, “초기화” 버튼을 클릭하여 타이머를 제어할 수 있습니다.

이 예제는 초 단위로 타이머가 증가하며, “시작” 버튼을 클릭하면 타이머가 시작되고, “정지” 버튼으로 정지할 수 있습니다. “초기화” 버튼을 클릭하면 타이머를 초기화합니다.

#JavaScript #Timer #타이머