[JS]자바스크립트로 스탑워치 만들어보기

<화면구성>

 

시

분

초

시작버튼  중단버튼 재설정버튼

 

 

<스크립트>

1.시작버튼 클릭시  setInterval 함수를 이용해서 countTime()이 1초마다 실행되도록 한다 

countTime()안에는 seconds++ 일초마다 늘어나며 , seconds가 60초가 되면 minutes

minutes++가 60이 되면 hours로 설계

2.중단버튼 클릭시 clearInterval 이용해서 함수 호출 중단 

3.재설정버튼 클릭시 clearInterval 이용해서 함수호출 중단 , 시분초 변수 0으로 재셋팅 , innerHTML = "00 : 00 00 " 표시 

 

 

 

[참고] setInterval() 함수는 계속적으로 함수가 호출 되는 것, setTimeout은 지정된 시간에 함수가 한번 호출 되는 것임 

 

---

60초 이후에 1분으로 안바뀌는 중 .......  

왜냐하면 , innerHTML 으로 값만 주고 , 다시 위로 올라가서 addSeconds가 실행되기 때문이다

근데 if문에 다시 함수를 만들어서 넣어줘도 1 : 00 한번 표시되고 다시 00:01 부터 시작된다 

 

 

seconds만 생각하지 말고, countTime()에서 쓸 수 있도록  구조분해 할당으로 [hours,minutes,seconds]를 이용하여 값을 배분해준다

 

완성

 

 

 

        let [seconds, minutes, hours] = [0, 0, 0];
        let timerRef = document.querySelector(".timerDisplay");
        let int = null; //카운트다운 변수 

        document.getElementById("startTimer").addEventListener("click", function () {

            if (int !== null) {
                clearInterval(int);
            } //카운트다운이 된 상태에서 다시 
            //버튼을 누르면 , 더 빨라짐 . 따라서 
            //카운트 다운이 있는 상태에서는 원래 카운트다운
            //중지 시키고 새로운 카운트다운을 시작 

            int = setInterval(displayTimer, 1000);

        })

        document.getElementById("pauseTimer").addEventListener("click", function () {
            clearInterval(int);
        })

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

        function displayTimer() {
            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;

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

        }

 

 

 

참고 : 

 

https://foolishdeveloper.com/create-a-simple-stopwatch-using-javascript-tutorial-code/

Create a Simple Stopwatch using JavaScript (Tutorial + Code) - foolishdeveloper.com

 

 

완성 코드:  

 

https://gitlab.com/PuddingForever/stopwatch

Pudding Jeong / StopWatch · GitLab