[JavaScript] 비동기 실행을 이용하여 타이머 만들기

html을 이용하여 타이머를 만든다.

 

 

 

 

먼저 표시할 타이머(h1)와 버튼들을 불러온다.

 

 

 

 

타이머 기능을 할 함수를 만든다. second에 1을 계속 증가시키고, 만약 second가 60이 되었다면, minute에 1을 증가시킨다. 그리고 second는 다시 0으로 초기화 한다. 그리고 minute가 60이 되었을 때 역시 마찬가지로 hour에 1을 증가시키고 minute는 0으로 초기화 한다.

 

10의 자리 표시, 만약 second가 1의 자리 수라면 secondTen은 0으로 표시하고, 10 이상 수라면 공백으로 표시한다. 분과 시간 역시 동일하게 적용한다. 그 후 textContent를 이용하여 h1에 함수에서 설정한 값대로 타이머를 적용시킨다.

 

 

 

 

먼저 setInterval을 넣을 변수 id를 만들고, 각 버튼을 클릭할 시 작동할 함수의 이름들을 적는다.  이제 버튼에 적용한 함수들을 만들어 볼 차례...

 

 

 

 

먼저 시작버튼을 눌렀을 시, 미리 만들어놓은 id 변수에 setInterval을 넣고, setInterval 요소에 이미 만든 타이머 함수를 넣고, 1000ms (1초) 마다 실행시킨다. 그럼 타이머가 실행된다.

 

일시중지 버튼을 눌렀으면, clearInterval을 실행시켜 비동기실행이 잠시 중단되도록 한다.

 

리셋버튼을 누를 시, 모든 초, 분, 시의 값들을 0으로 초기화시키고, 각각의 10의 자리 수의 값들도 초기화시킨다. 그리고 h1.textContent로 다시 타이머를 00:00:00으로 표시하게 한 후,  clearInterval을 실행시켜 타이머를 정지시킨다.

 

 

 

 

확인 결과 정상적으로 타이머가 작동한다.