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