바닐라 JS, 타이머 만들기

Do it 자바스크립트 입문 책 실습 과제 내용을 정리한 내용입니다.

타이머 만들기 과제를 따라해보았다. 사용자가 분과 초를 입력하고 시작 버튼을 누르면 시간이 1초씩 줄어들고 다 줄어들면 타이머가 종료되는 타이머다. 일상에서 자연스럽게 써 오던 이런 기능도 막상 구현하려고 보니 생각할 지점이 많았다. 순서대로 정리해보면,

1. 시간을 지정하는 데 이때 초나 분 값이 없다면 해당 시간을 0으로 화면에 보여줘야 한다.
2. 시작 버튼을 누르면 -1 씩 초가 줄어드는 함수를 실행하고
3. 처음 지정한 시간에서 -1초 줄어든 값을 화면에 표시한다.
4. 이렇게 진행하면서 초가 0이 되는 지 조건문으로 확인해 초가 0이 되면 분값이 0인지 확인해서
5. 분 값도 0이면, 초와 분이 0이므로 타이머를 종료하고
6. 분 값이 0이 아니면, 분에서 -1 을 하고 초를 59로 세팅해서 다시 -1 초를 진행한다.

과제 풀이에서는 이런 과정을 순서도로 그리고 개발하는 것을 권장한다. 내 생각에도 순서도를 그리지 않고 일의 흐름을 파악하기가 쉽지 않을 것 같다. 입문자라면 더 그렇다. 아무튼 풀이에 나온 순서도를 참고해서 나만의 순서도를 다시 그려보았다.

우선 아래와 같이 html 가 세팅되어 있다. 여기서 버튼에 onclick 속성으로 함수를 호출했는데, 오랜만에 바닐라 js 를 해보니' 함수()' 식으로 onclick 이벤트를 설정해주는 것이 영 어색하다.

<div id="wrapper">
  <form>
    <label><input type="text" id="startMin" />분</label> // 분 입력 창 
    <label><input type="text" id="startSec" />초</label> // 초 입력 창 
    <input
      type="button"
      value="START"
      class="start-btn"
      onclick="startTimer()" // 타이머 시작 함수 
    />
    <input
      type="button"
      value="RESET"
      class="reset-btn"
      onclick="resetTimer()" // 타이머 리셋 함수 
    />
  </form>
  <hr />
  <div id="display" class="remaining"></div> // 진행되는 타이머 시간을 보여주는 곳 
</div>
  <script src="js/timer.js"></script> // js 파일 연결
</body>

이제 연결한 timer.js 파일에서 변수를 선언한다. 분과 초, 타이머는 전역에서 사용할 것이라 최상단에 선언을 해주고,

let min, sec;
let timer;

stratTimer 함수를 작성해보면 아래와 같다. id 값으로 해당 input 태그의 value 로 분, 초를 읽어오고, 입력값이 없으면 0 으로 세팅해준다. 그리고 초를 -1씩 해주는 함수 countTimer 를 1초마다 실행하도록 setInterval 함수를 만든다.

function startTimer() {
  min = document.querySelector("#startMin").value; 
  if (min === "") min = 0;
  sec = document.querySelector("#startSec").value;
  if (sec === "") sec = 0;
  timer = setInterval(countTimer, 1000);
}

countTimer 함수는 초가 0이 아닌 조건에서 -1 을 하고 그 값을 화면에 보여준다. 그러다 초가 0이 되면 분이 0인지 아닌지 판단해서 0이면 타이머를 종료하고 0 이 아니면 분에서 1을 빼고 초를 59초로 세팅한다.

function countTimer() {
  if (sec != 0) {
    sec--;
    document.querySelector("#display").innerText =
      min + "분" + sec + "초 남았습니다.";
  } else {
    if (min != 0) {
      min--;
      sec = 59;
    } else {
      clearTimer(timer, "타이머 종료");
    }
  }
}

function resetTimer() { // 리셋 버튼 연결
  clearTimer(timer, "리셋 종료");
}

중복으로 사용하는 코드는 clearTimer 함수로 묶어서 적용한다. setInterval 을 멈추기 위해서 clearInterval 메서드를 활용한다.

function clearTimer(t, text) {
  clearInterval(t);
  document.getElementById("display").innerText = text;
  document.getElementById("startMin").value = "";
  document.getElementById("startSec").value = "";
}

타이머 만들기 끝.