Stopwatch

자바스크립트 stopwatch

2022.07.09

혼자 하다가 모를때마다 해설보고 이해해보려고 노력하고 작성하고 계속 반복했다. 진짜 이해안되는건 그냥 따라적었다. 다 합치면 7시간은 걸렸어...

생각정리

tens++ 시켜야함
숫자가 올라가는 속도를 설정해야함 1000ms- 1sec / 10000ms - 1ten 으로 (이거 필요없었음...당연하지 바보야...챙피해)
start 버튼 누르면 계속 그 행동 반복하게
tens < 99 되고나면 second++ 되게
reset ~

변수 선언

const start = document.querySelector('#btn-start');
const stop = document.querySelector('#btn-stop');
const reset = document.querySelector('#btn-reset');
const classtens= document.querySelector(".tens");
const classsecond= document.querySelector(".second");
let tens = 00;
let second = 00;
let Interval =null;
let Interval= null; // 왜 넣는지 잘 이해못하고 있다
//(진짜 모르겠어...되게 안중요하게 한줄 띡 들어있는데 입력안하면 구현이 안돼...대체 뭘까...)

함수선언

function btnStart() {
   start.addEventListener('click', () => {
    clearInterval(Interval);
    Interval = setInterval(countStart, 10);
    }
   )}


function btnStop() {
    stop.addEventListener('click', () =>{
        clearInterval(Interval);
    })
}

function btnReset() {
    reset.addEventListener('click', () => {
        clearInterval(Interval); 
        tens= "00";
        second= "00"; 
        classtens.innerHTML= tens;
        classsecond.innerHTML= second;

    })
}


function countStart() {
    tens++;

    if(tens <= 9) {
        classtens.innerHTML= "0" + tens;
    }

    if(tens > 9) {
        classtens.innerHTML= tens; 
    }

    if(tens > 99) {
        second++;
        classsecond.innerHTML= "0" + second;
        tens= 0;
        classtens.innerHTML= "0" + 0;
    }
    
    if(second > 9) {
        classsecond.innerHTML= second;
    }

}

btnStart();
btnStop();
btnReset();

머리터짐! (해결 X)

function btnStart() {
   start.addEventListener('click', () => {
    clearInterval(Interval);

• 이 부분에 clearInterval(Interval); 이거 대체 왜 넣는지 이해가 안돼 지금 중단하는 것도 아닌데 왜 넣는걸까...Reset이랑 Stop은 중단해야되는거니까 대충 알겠는데 Start는 반복하는건데 중단시키는것도 아니잖아...진짜 머리터져

• classtens.innerHTML= "0" + 0;
  이걸 넣어야 부드럽게 숫자가 올라가던데 이 문장이 뭔 의미인지 잘 모르겠어...

머리터짐! (해결 OK)

Interval = setInterval(countStart, 10);

• function btnStart 작성할때 계속 countStart 뒤에 ()넣어서 제대로 출력안됐음
  () 넣어버리면 countStart 함수먼저 실행되기 때문에 당연히 반복안됨 괄호넣지말고 함수자체를 인자로 전달해줘야함!

메모

document.querySelector
.innerHTML
addEventListener
clearInterval
setInterval(countStart, 10)