꾸매코딩

[JavaScript] 타이머 만들기 [타이머 기능 구현 / 시작, 정지 버튼] 본문

Project/Timer Project

[JavaScript] 타이머 만들기 [타이머 기능 구현 / 시작, 정지 버튼]

꾸매코더 2021. 5. 26. 20:03
반응형

개발 동기

타이머 어플을 사용하여 공부 시간을 측정하고 있는데, 배우고 있는 JavaScript를 통해 타이머를 직접 만들고 싶다는 생각이 들어서 만들게 되었다.

계획

매초 1씩 증가하는 타이머 기능을 만들 예정이다.

버튼(button)을 이용하여 타이머의 시작, 정지, 초기화 기능을 나타내 줄 예정이다.

 

타이머 기능

let TIME = 0;

// 타이머 실행 버튼
function startButton() {
  updateTimer();
  stopButton();
  setInterval(updateTimer, 1000); // 매 초당 updateTimer 반복
}

//... 생략

// 타이머 증가 함수
function updateTimer(){
    const hours = Math.floor(TIME/3600);
    const checkMinutes = Math.floor(TIME/60); 
    const seconds = TIME % 60;
    const minutes = checkMinutes % 60;
    
    timer.innerText = `${hours < 10 ? `0${hours}` : hours}:${
        minutes < 10 ? `0${minutes}` : minutes}:${
        seconds < 10 ? `0${seconds}` : seconds}`;
    TIME++;
}

 

문제 점

setInterval() 함수를 담은 변수를 전달하는 방법은?

버튼을 여러번 누르면  setInterval()가 중복으로 적용된다, 해결 방법은?

 

해결

setInterval() 함수를 담은 변수를 전달하는 방법은? 
→ cron 변수를 만들어서 해결

버튼을 여러번 누르면  setInterval()가 중복으로 적용된다, 해결 방법은?
→ css로 start 버튼을 숨겨서 해결

 

[index.html]

/* 생략 */
  <body>
    <span class="timer js-timer">00:00:00</span>
    <input class="js-timer__startBtn" type="button" value="시작" />
    <input class="js-timer__stopBtn" type="button" value="정지" />
    <script src="timer.js"></script>
  </body>

 

[style.css]

.hide {
	display: none;
}

 

[timer.js]

const timer = document.querySelector('.js-timer'),
  stopBtn = document.querySelector('.js-timer__stopBtn'),
  startBtn = document.querySelector('.js-timer__startBtn'),


let TIME = 0;
let cron; // clearInterval을 위한 변수

function startButton() {
  updateTimer();
  stopButton();
  cron = setInterval(updateTimer, 1000);
  timer.classList.add('hide');
}

function stopButton() {
  clearInterval(cron);
  timer.classList.remove('hide');
}

function updateTimer(){
    const hours = Math.floor(TIME/3600);
    const checkMinutes = Math.floor(TIME/60); 
    const seconds = TIME % 60;
    const minutes = checkMinutes % 60;
    
    timer.innerText = `${hours < 10 ? `0${hours}` : hours}:${
        minutes < 10 ? `0${minutes}` : minutes}:${
        seconds < 10 ? `0${seconds}` : seconds}`;
    TIME++;
}
startBtn.addEventListener('click', startButton);
stopBtn.addEventListener('click', stopButton);

 

 

결과

계획하고 코드를 작성하면서 JavaScript 활용이 많이 미흡하다고 생각했다.
직접 하다보니 내가 이해한 부분과 아직 헷갈리는 부분을 알게 되어 앞으로 공부하는 데에 방향을 잡을 수 있을 것 같다고 생각한다.
현재로써는 직접 해보면서 얻는 배움이 개념을 공부하는것보다 훨씬 크다고 느끼게 되었다.

결과

 

반응형
'Project/Timer Project' Related Articles more