setInterval, clearInterval을 사용한 간단한 스톱워치 만들기

HTML

    <div class="wrap">
        <h1>스톱워치</h1>
        <form id="forms" name="output">
            <p id="output">00:00:00</p>
            <input id="addbtn" type="button" value="Start">
            <input id="stopbtn" type="button" value="Stop" >
            <input id="resetbtn" type="button" value="Reset">
        </form>
    </div>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: tomato;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
}
.wrap{
    border: 1px solid white;
    border-radius: 15px;
    padding: 20px;
}

h1{
    color: black;
    text-align: center;
    font-weight: bold;
}
#forms p{
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
}
#forms input{
    background-color: black;
    color: white;
    border-radius: 15px;
    width: 100px;
    height: 50px;
}

JS

const output = document.querySelector("#forms #output");
const start = document.querySelector("#forms #addbtn");
const stop = document.querySelector("#forms #stopbtn");
const reset = document.querySelector("#forms #resetbtn");

let hours =0;
let min = 0;
let sec = 0;
let count=0;

let interval;

function resetTime(){
     hours =0;
     min = 0;
     sec = 0;
}

function timeLayout(h,m,s){
    if(s>60){
        sec=0;
        min++;
    }
    else if(m>60)
    {
        min=0;
        hours++;
    }
    else if(h>24){
        resetTime();
    }
}

function startBtn(){
    interval = setInterval(()=>{
        sec++;
        timeLayout(hours,min,sec);
        output.textContent=`${String(hours).padStart(2,"0")}:${String(min).padStart(2,"0")}:${String(sec).padStart(2,"0")}`;
    }), 1000};
        
function stopBtn(){
    
        clearInterval(interval);
}

function resetBtn(){
    
    resetTime();
    output.textContent=`${String(hours).padStart(2,"0")}:${String(min).padStart(2,"0")}:${String(sec).padStart(2,"0")}`;
}

start.addEventListener("click",startBtn);

stop.addEventListener("click", stopBtn);

reset.addEventListener("click", resetBtn);

실행화면

 

스톱워치 실행화면

---

어려웠던점

clearInteval이 안먹혀서 어려웠음.

js에서

inteval을 사용하기위해 처음에 짯던 코드

function startBtn(){
	setInterval(()=>{
    sec++;
    output.textContent=`${String(hours).padStart(2,"0")}:${String(min).padStart(2,"0")}:${String(sec).padStart(2,"0")}`;
	}, 1000)};
    
 function stopBtn{
	clearInterval(startBtn);
}

start.addEventListener("click",startBtn);

stop.addEventListener("click", stopBtn);

이렇게 할 때, stop버튼이 작동하지 않았다. (reset은 잘 작동해서 코드에서 제외시켰다.

또 한, 리셋을시켜도 1초동안만 reset화면 00:00:00이 띄워진후 계속해서 output은 진행되었다.

즉 40초까지 진행 후 리셋을 시키면, 잠시나마 00:00:00이 나오고 다시 41이 카운트되는 상황.

 

 clearInterval이 작동안하는 줄 알고 이리저리 검색하다가

변수명으로 interval을 준 후, 거기에 함수를 할당하고 clearInterval(interval) 형식으로하니 문제없이 작동하였음.

 

제목은 간단한 스톱워치지만... 전혀 간단하지 않았음 ㅠ