스톱워치를 만들어 JS 배우기

오늘의 튜토리얼에서는 첫 번째 프로젝트로 스톱워치를 만들어 보겠습니다. 이 스톱워치의 특별한 점은 여기에서 시, 분, 초, 밀리초를 셀 수 있다는 것입니다. 그러나 이 작업을 2단계로 수행합니다. 먼저 HTML과 CSS를 사용하여 간단한 인터페이스를 디자인합니다. 그런 다음 기능적으로 만들 것입니다.

HTML 및 CSS

먼저 스톱워치용 기본 컨테이너를 만들어 보겠습니다.



그런 다음 기본 스타일을 추가해 보겠습니다.



자, 다음으로 넘어갑시다. 이제 모든 시간을 볼 수 있도록 디스플레이를 만듭니다.

아래와 같이 display 클래스 이름으로 새 div를 추가하십시오.



그런 다음 예쁘게 보이도록 스타일을 추가해 보겠습니다.



너는 그것을 다 했니? 엄청난! 이제 HTML 코드에 3개의 버튼을 만든 다음 JavaScript를 사용하여 기능적으로 만들 것입니다.

지금은 버튼을 만들어 보겠습니다. 그리고 거기에 스타일을 추가하십시오.



아래와 같이 스타일시트에 CSS를 추가합니다.



했어? 이제 JavaScript를 사용하여 몇 가지 기능을 구현할 차례입니다.

자바스크립트

먼저 let을 사용하여 몇 가지 정보를 수집합니다. 이러한 자산은 디스플레이 ID의 상수이며 시간, 분, 초 및 밀리초 동안 0을 유지합니다.



그런 다음 타이머를 시작, 일시 중지 및 재설정하는 세 가지 기능을 만듭니다.



이제 타이머를 시작하는 함수인 dispayTimer에서 이미 사용한 함수를 만들겠습니다. 이제 시작 버튼을 클릭하여 스톱워치를 시작하면 카운트다운을 시작할 수 있도록 이 함수를 만들어야 합니다.
걱정하지 마세요. 제가 여기서 무엇을 하고 있는지 설명해 드리겠습니다.



*설명: *
여기서 세 개의 "if"함수를 사용했음을 알 수 있습니다. 첫 번째 'if' 함수에서 밀리초가 1000이면 밀리초 값이 0이고 초가 1씩 증가한다는 조건을 추가했습니다.

➤ 1초가 1000밀리초라는 것을 알고 있습니다. 따라서 카운트다운 후 밀리초 값이 1000에 도달하면 밀리초 값은 0이고 초 값은 1씩 증가합니다.

➤ 마찬가지로 시간(초)에 대해 두 번째 "if"함수를 사용했습니다. 우리는 1분이 60초라는 것을 알고 있습니다. 따라서 초 값이 60이면 초 시간은 0이고 분 셀은 1씩 증가합니다.

➤ 1시간이 60분이라는 것을 알고 있습니다. 따라서 분 단위의 시간이 60이 되면 분 셀은 0이 되고 시간 셀은 증가합니다.

이것이 카운트다운 타이머가 계속되는 방식입니다.

이제 각 단일 숫자 지점 앞에 0을 추가합니다. 시간이 10보다 작으면 숫자를 표시합니다. 다음 네 줄 코드를 사용하여 이러한 각 한 자리 숫자에 0을 추가합니다. 시, 분, 초 및 밀리초 값이 10보다 작으면 0 해당 시간 전에 추가됩니다.



이 모든 정보를 innerHTML을 사용하여 디스플레이에 정렬해야 합니다. 위와 같이 시, 분, 초, 밀리초는 각각 h, m, s, ms 사이에 저장됩니다.



너는 그것을 다 했니! 축하합니다. 기본 JavaScript를 사용하여 스톱워치를 만들었습니다.

그런데 문제가 발생하면 아래에서 전체 JavaScript 코드를 볼 수 있습니다.

let [milliseconds,seconds,minutes,hours] = [0,0,0,0];
let timerRef = document.querySelector('.display');
let int = null;

document.getElementById('startTimer').addEventListener('click', ()=>{
    if(int!==null){
        clearInterval(int);
    }
    int = setInterval(displayTimer,10);
});

document.getElementById('pauseTimer').addEventListener('click', ()=>{
    clearInterval(int);
});

document.getElementById('resetTimer').addEventListener('click', ()=>{
    clearInterval(int);
    [milliseconds,seconds,minutes,hours] = [0,0,0,0];
    timerRef.innerHTML = '00 : 00 : 00 : 000 ';
});

function displayTimer(){
    milliseconds+=10;
    if(milliseconds == 1000){
        milliseconds = 0;
        seconds++;
        if(seconds == 60){
            seconds = 0;
            minutes++;
            if(minutes == 60){
                minutes = 0;
                hours++;
            }
        }
    }

 let h = hours < 10 ? "0" + hours : hours;
 let m = minutes < 10 ? "0" + minutes : minutes;
 let s = seconds < 10 ? "0" + seconds : seconds;
 let ms = milliseconds < 10 ? "00" + milliseconds : milliseconds < 100 ? "0" + milliseconds : milliseconds;

 timerRef.innerHTML = ` ${h} : ${m} : ${s} : ${ms}`;
}

이 튜토리얼이 간단한 JavaScript 스톱워치를 만드는 방법을 가르쳐 주셨기를 바랍니다. JavaScript도 이해할 수 있습니다.

나와 연결

즐거운 코딩하세요!