안녕하세요 느종입니다.
오늘은 저번 시간에 이어서 스톱워치(목표 시간 맞추기) 메인 화면 페이지 함수를 작성해보도록 하겠습니다. 그럽 바로 시작하겠습니다. 함께 공부해요!
자바스크립트 코드
[ scripts.js ]
convertGoalTime() : 목표 시간(GOAL_TIME)을 초로 입력 했을 때 00.000 형식으로 바꿔주는 함수
s = String(GOAL_TIME).padStart(2, '0') : "padStart(targetLength, padString)" 앞서 받아온 문자열의 길이가 targetLength 보다 작으면, 그 나머지 공간을 특정한 문자(padString)으로 채워주는 함수입니다. padString을 입력하지 않고, targetLength만 입력하면 나머지 공간은 공백으로 채워집니다.
t = s + ".000" : 목표로 하는 시간은 항상 초이기 때문에 밀리초 .000을 더해줍니다.
return t : 이렇게 변환되어진 목표 시간을 반환합니다.
checkingTime() : 목표로 정한 시간과 현재 내가 멈춘 시간이 일치하는지 검사하는 함수입니다.
secStr = timeSec.innerText : 초(timeSec) 태그 안에 들어 있는 텍스트를 읽어옵니다.
mSecStr = timeMSec.innerText : 밀리초(timeMSec) 태그 안에 들어 있는 텍스트를 읽어옵니다.
let totalTime = secStr + "." + mSecStr : 초와 밀리초를 합쳐서 하나의 시간 문자로 만듭니다.
let goalTime = convertGoalTime() : 위에서 변환한 목표 시간을 goalTime 변수에 넣습니다.
resTime.innerHTML = totalTime : 결과 화면에서 보여질 resTime 태그에 현재 내가 멈춘 시간을 추가합니다.
if(totalTime == goalTime) { : 현재 내가 멈춘 시간과 목표 시간이 일치한다면
resText.innerHTML = "성공!<br>축하합니다. : 결과 화면에서 보여질 resText에 축하합니다. 문구를 넣어줍니다.
resText.innerHTML = "실패!<br>다시 도전하세요." : 일치 하지 않는 다면 다시 도전하세요. 문구를 넣어줍니다.
modal.classList.toggle("hidden") : 시간 멈춤 버튼을 눌렀을 때 팝업(모달)창으로 결과를 볼 수 있도록 활성화 합니다.
[ scripts.js ]
setTimer() : 시간 시작 버튼을 눌렀을 때 setInterval에 의해서 반복적으로 실행되는 함수입니다.
mSec++ : setInterval의 시간을 1밀리초로 입력을 하였으므로, setTimer함수가 1밀리초마다 반복 실행이 되는데 이 때 밀리초 변수인 mSec를 1씩 증가하도록 합니다.
if(mSec < 10) { : 밀리초가 10 미만일 경우
timeMSec.innerHTML = "00" + mSec : 밀리초가 들어갈 태그에 앞에 00을 붙인 후 뒤에 밀리초 변수를 넣습니다.
} else if(mSec < 100) { : 밀리초가 100 미만일 경우
timeMSec.innerHTML = "0" + mSec : 밀리초가 들어갈 태그에 앞에 0을 붙인 후 뒤에 밀리초 변수를 넣습니다.
timeMSec.innerHTML = mSec : 그 외 나머지는 밀리초가 들어갈 태그에 밀리초 변수를 넣어줍니다.
if(mSec > 999) { : 밀리초가 1000이상이 되었을 경우
sec++ : 초에 1을 증가시켜주고
if(sec < 10) { : 밀리초처럼 초가 10 미만일 경우
timeSec.innerHTML = "0" + sec : 초가 들어갈 태그에 앞에 0을 붙인 후 뒤에 초 변수를 넣어줍니다.
timeSec.innerHTML = sec : 그 외 나머지는 초가 들어갈 태그에 초 변수를 넣어줍니다.
mSec = 0 : 밀리초는 0으로 초기화 해줍니다.
timeMSec.innerHTML = mSec : 초기화한 밀리초를 밀리초 태그에 추가합니다.
이렇게 해서 스톱워치(목표 시간을 맞춰라) 콘텐츠에 대한 모든 코드를 작성하였습니다. 예전 콘텐츠에 비해서 길이가 좀 짧아졌네요. 저는 innerHTML을 사용하여 스톱워치를 만들었지만, 재귀 함수를 이용한다던지 다른 방법으로도 스톱워치를 만들 수 있습니다. 각자 자신이 편한 방식대로 만들어보면 될 듯 싶습니다. 그럼 다음 시간에는 또 다른 콘텐츠로 공부하러 오겠습니다.