안녕하세요 느종입니다.
오늘은 저번 시간에 이어서 스톱워치 메인 화면 페이지를 만들어보도록 하겠습니다. 그럼 바로 시작하겠습니다. 함께 공부해요!
메인 화면 페이지
화면 가운데에 00.000으로 시간을 나타낼 수 있도록 구성하였습니다. 초는 소수점아래 3째자리까지 표현을 하였는데 이 부분은 본인 입맛에 맞게 바꾸셔도 될 것 같습니다. 그 아래에는 시간을 시작하고 멈추는 버튼을 만들었습니다. 앞서 말했듯이 시간을 멈췄다가 다시 시작할 수 있는 기능은 이번에 필요가 없기 때문에 시작, 멈춤 2가지 버튼만 만들었습니다. 시작 버튼을 누르면 스톱워치가 시작되고, 멈춤 버튼을 누르면 결과 화면 페이지가 팝업으로 뜨도록 하였습니다.
[ index.html ]
스톱워치 화면 안에 00.000으로 구성되어 있는데, 초와 밀리초를 나누어서 span태그로 입력을 하였습니다. 그 아래에는 시작 버튼과 멈첨 버튼을 추가하였습니다. 제일 먼저 시작 화면 페이지가 보여야 하므로 메인 화면 페이지는 hidden 클래스를 사용하여 숨겨주도록 합니다.자바스크립트 코드
[ scripts.js ]
startBtn : 시작 하기 버튼 태그를 담는 변수
startPage : 시작 화면 페이지 태그를 담는 변수
mainPage : 메인 화면 페이지 태그를 담는 변수
timeStartBtn : 스톱워치 시작 버튼 태그를 담는 변수
timeStopBtn : 스톱워치 멈춤 버튼 태그를 담는 변수
timeSec : 스톱워치 초를 나타내는 span 태그를 담는 변수
timeMSec : 스톱워치 밀리초를 나타내는 span 태그를 담는 변수
GOAL_TIME = "5" : 목표로 설정할 초입니다. 1~60초 사이의 숫자를 입력하면 됩니다.
sec : 초를 담는 변수
mSec : 밀리초를 담는 변수
timer : setInterval 함수를 담는 변수
init() : 초기화 함수
sec = 0 , mSec = 0 : 초와 밀리초의 값을 0으로 초기화 시켜줍니다. 처음 시작하거나 다시 시작할 때 꼭 해주어야 합니다.
timeSec.innerHTML = "00" : 스톱워치 초를 나타내는 span 태그도 초기화 해줍니다.
timeMSec.innerHTML = "000" : 스톱워치 밀리초를 나타내는 span 태그도 초기화 해줍니다.
startBtn.addEventListener('click', function() { : 시작하기 버튼에 클릭 이벤트 리스너를 추가해줍니다.
startPage.classList.toggle("hidden") : 시작하기 버튼을 누르면 시작 화면 페이지는 숨깁니다.
mainPage.classList.toggle("hidden") : 시작하기 버튼을 누르면 메인 화면 페이지는 보여지게 합니다.
[ scripts.js ]
timeStartBtn.addEventListener('click', function() { : 스톱워치 시작 버튼에 클릭 이벤트 리스너를 추가합니다.
if(timeStartBtn.disabled === false) { : 스톱워치 시작 버튼이 클릭이 가능하다면
clearInterval(timer) : 기존에 사용했던 setInterval를 삭제 초기화 해줍니다.
timer = setInterval(setTimer, 1) : setInterval를 사용하여 1 밀리초마다 setTimer 함수가 실행되도록 하고, 그것을 timer 변수에 넣어줍니다.
timeStartBtn.disabled = true : 그 동안은 스톱워치 시작 버튼은 클릭이 안되게 합니다.
timeStopBtn.addEventListener('click', function() { : 스톱워치 멈춤 버튼에 클릭 이벤트 리스너를 추가합니다.
clearInterval(timer) : 시작 버튼과 똑같이 기존에 사용했던 setInterval를 삭제 초기화 해줍니다.
checkingTime() : 스톱워치 멈춤 버튼을 눌렀을 때 해당하는 시간이 목표로 설정한 시간과 일치하는지, 일치하지 않는지를 판별하는 함수입니다.
timeStartBtn.disabled = false : 다시 스톱워치 시작 버튼이 클릭이 되게 합니다.
오늘은 "스톱워치(목표로 하는 시간을 맞춰라)" 콘텐츠의 메인 화면 페이지를 만들어 보았습니다. 아직 몇 가지 함수와 기능들을 더 추가해야 되는데요. 다음 시간에는 목표로 설정한 시간과 일치하는지를 판단하는 함수와 setInterval를 이용하여 반복되는 함수인 setTimer 함수를 작성해보도록 하겠습니다.