본문 바로가기
국비교육 시작

[국비 16일차]javascript, 간단하게 스탑워치 만들기 !

kkzzznn 2024. 7. 22. 18:51

스톱워치;

 

 

자바스크립트 스탑워치 만들기

수업시간때 자바스크립트로 간단한 스톱워치 만들기를 해 보았다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stop Watch</title>
    <style>
        button { padding: 5px; margin: 5px; font-size: 1.5rem;}
    </style>
    <script>
        function twoDigit(num) {
            return num < 10 ? '0' + num : String(num);      // 4 --> '04', 15 --> '15'
        }
        function displayTime(num) {
            let minute = parseInt(num/600);
            let second = parseInt(num/10) % 60;
            return twoDigit(minute) + ':' + twoDigit(second) + '.' + num%10;
        }
        window.onload = () => {
            let count = 0;
            let si = null;
            const display = document.getElementById('display');
            const start = document.getElementById('start');
            const stop = document.getElementById('stop');
            const reset = document.getElementById('reset');

            start.onclick = () => {
                si = setInterval(() => {
                    count++;
                    display.innerHTML = displayTime(count);
                }, 100);
            }
            stop.onclick = () => {
                clearInterval(si);
            }
            reset.onclick = () => {
                count = 0;
                display.innerHTML = '00:00.0';
            }
        }
    </script>
</head>
<body style="margin: 40px;">
    <h1 id="display" style="font-size: 4rem;">00:00.0</h1>
    <button id="start">시작</button>
    <button id="stop">정지</button>
    <button id="reset">리셋</button>
</body>
</html>

 

처음은 바디부분부터 해보았는데,

<h1 id="display" style="font-size: 4rem;">00:00.0</h1>

시간이 표시되는 부분을 일단 만들었고

 

그다음 시작, 정지, 리셋 버튼을 만들었다.

<button id="start">시작</button>
    <button id="stop">정지</button>
    <button id="reset">리셋</button>

 

일단 앞에 보이는 부분은 만들었고 이것들의 자세한 사항을

자바스크립트로 구현해야한다.

 

function twoDigit(num) {
            return num < 10 ? '0' + num : String(num);      // 4 --> '04', 15 --> '15'
        }

 

이 함수는 숫자를 입력받아 항상 두 자리 문자열로 반환하는 역할을 한다.

*twoDigit 이라는 함수를 정의하고, num이라는 매개변수를 받는다.

삼항 연산자를 사용하여 

 

num < 10 ====> num이 10보다 작은지 확인하고

'0'+ num ====> 조건이 참일경우 ( 0~9일경우)  숫자앞에 0을 붙인다.; ex) 4 가 입력되면 04

string(num) ====> 조건이 거짓일경우, 숫자열을 문자열로 전환한다., ex) 15가 입력되면 '15'가 된다.

결과반환 : 위의 과정을 거쳐 만들어진 문자열을 반환한다.

 

이 함수의 목적은 시간 표시에서 한 자리 숫자 앞에 0을 붙여 항상 두 자리로 표시하기 위함이다.

예를 들어, 스톱워치에서 3초를 '03'으로 표시하고 싶을 때 사용한다. ;

 

function displayTime(num) {
            let minute = parseInt(num/600);
            let second = parseInt(num/10) % 60;
            return twoDigit(minute) + ':' + twoDigit(second) + '.' + num%10;
        }

 

이 함수는 0.1초 단위의 카운트를 받아서 '분:초.0.1초' 형식의 문자열로 변환한다.

함수정의 : diplayTime이 이라는 함수를 정의하고, num이라는 매개변수를 받는다.

 

분 계산 :

let minute = parseInt(num/600);

num/600 : 600은 1분을 0.1초 단위로 나타낸 값이다. 

parseInt : 소수점 이하를 버리고 정수만 나타낼때 사용한다

ex ) num이 1200이면 (2분), minute은 2가 됩니다.

 

초 계산 :

let second = parseInt(num/10) % 60;

num/10 : 0.1초 단위를 초단위로 변환한다.

parseInt : 소수점 이하를 버리고 정수만 나타낼때 사용한다.;

% 60 : 60으로 나눈 나머지를 구한다.; 분을 제외하고 초만 남긴다;

ex) num = 1234이면  parseInt(1234/10) *123, 123 % 60 = 3 ;

 

시간 문자열 생성 및 반환 :

return twoDigit(minute) + ':' + twoDigit(second) + '.' + num%10;

 

twodigit(minute) : 분을 두자리 문자열로 변환

' : ' 가운데 : 표시

twoDigit(second) : 초를 두자리 문자열로 변환  

' . ' : 초와 0.1초 단위 사이에 . 추가

num%10 : 0.1초 단위를 계산

* 10으로 나눈 나머지 이므로 0~9사이이다.

이 모든 부분을 문자열로 연결하여 최종 결과를 만든다.

 

ex)

  displayTime(1234) → "02:03.4"

  • 1234 / 600 = 2분 (parseInt(2.0566...) = 2)
  • (1234 / 10) % 60 = 3초 (123 % 60 = 3)
  • 1234 % 10 = 4 (0.4초)

 

window.onload = () => {
            let count = 0;
            let si = null;
            const display = document.getElementById('display');
            const start = document.getElementById('start');
            const stop = document.getElementById('stop');
            const reset = document.getElementById('reset');

1. 이벤트 리스너 설정

 window.onload = () => {... }

페이지가 로드된 후에 실행될 함수를 정의한다.

화살표 함수 (=>) 를 사용하여 콜백 함수를 정의 하였다

 

2.변수 초기화

let count = 0;
 let si = null;
  • let count ====> 카운트를 으로 초기화 한다
  • let si = null =====> setinterval의 id를 저장할 변수이다. null로 초기화 하였다.

3. dom 요소 참조

const display = document.getElementById('display');
            const start = document.getElementById('start');
            const stop = document.getElementById('stop');
            const reset = document.getElementById('reset');

 

각 HTML 요소를 Jacascript 변수에 할당하였다 .;

* display는 시간표시 요소

start stop reset 은 각기능의 버튼 요소

 

4. 시작 버튼기능 설정

start.onclick = () => {
                si = setInterval(() => {
                    count++;
                    display.innerHTML = displayTime(count);
                }, 100);
            }

 

  • 시작 버튼 클릭시 실행될 함수를 정의한다.
  • setinterval을 사용하여 0.1초마다 반복 실행될 함수를 설정한다.

반복 실행 함수 :

count를 1++한다

displaytime로 현재 시간을 계산하여 display 요소를 설정한다.

setInterva의 반환값을 si에 저장한다.;

 

5. 정지 버튼 기능

stop.onclick = () => {
                clearInterval(si);
            }

 

  • clearInterval(si) 를 호출하여 설정한 타이머를 중지시킨다.

6. 리셋 버튼 기능

reset.onclick = () => {
                count = 0;
                display.innerHTML = '00:00.0';
            }

 

  •  count를 0으로 초기화;
  • display 요소의 내용을 00:00:0으로 리셋시킨다.

 

수업시간에 학원 선생님과 함께 만들어 보았는데 생각보다 어려워서 무척 애를 먹었다.

많이 연습하여 다음에는 더 잘만들고싶다.

 

 

'국비교육 시작' 카테고리의 다른 글

[국비 21일] 초보적인 카카오맵 활용  (0) 2024.07.29
[국비 18일차]javascript, 이미지 활용해 전자시계 만들기 !  (1) 2024.07.24
[국비 15일차]javascript 홀짝 구하기  (0) 2024.07.20
[국비 13일차]javascript, 반복문 1~100사이의 정수값 더하기 !  (0) 2024.07.17
[국비 12일차]javascript, 간단한 if 조건문, 나이계산하기 !!  (0) 2024.07.16

'국비교육 시작' Related Articles

티스토리툴바