[JS] 여러개의 타이머/스톱워치 만들기 (setInterval 활용)

 

JavaScript에서 스톱워치, 남은 시간 등의 표시가 필요한 경우 하나만 만드는 건 간단한데 여러 개 만들려고 하니 시간이 똑같이 가거나, 하나만 적용되거나, 초가 엄청 빠르게 올라가거나 하는 문제가 생기기 일수입니다.
각 object에 각각의 timer를 걸어줘야되는데 생각보다 간단합니다. setTimeout도 가능하지만, setInterval를 활용해 여러 개의 타이머를 만들어보겠습니다.

---

 

이 예제에서는 표현하려는 시간을 초 단위 int로 가지고 있고 00:00:00를 만들어주는 예제이며,

다른 경우는 아래 코드에서 각 timer를 거는 법만 참고하시고 표시 방법은 상황에 따라 응용하시면 됩니다.

 

1. elements 선택 및 time 설정

 

아래처럼 다건의 타이머를 만들기 위해서 HTML에 시간표시를 위한 영역을 여러건 만들어 놓으셨을 겁니다.

 

for(...){
	<div> 남은시간 : <p id="stopWatch" name="stopWatch"> 00:00:00 </p></div>
}

 

script에서 document에 다건 생성된 name을 array로 받습니다. 

그리고 각 object에 timer를 걸어주면 됩니다.

 

function setInterval(){
    // HTML의 name을 기준으로 array 생성
    let arr = document.getElementsByName("stopWatch");
   
    for(let i=0; i<arr.length; i++){
        // time은 스톱워치의 경우 0으로 두고 time++;
        // time은 타이머의 경우 남은 시간을 초 단위로 두고 time--;
        // 차이를 눈으로 보기 위해 (i*100)을 추가했고, 실제로는 표현하려는 시작 시간을 넣으셔야 됩니다.
        let time = 0 + (i*100); 
        
        startTimer(time, arr[i]); // 각 타이머 생성
    }
}

 

 

2. 각 object에 timer 걸기

 

위 코드에서 호출한 startTimer() 입니다.

 

function startTimer(time, obj){
    var hour, min, sec;

    var timer = setInterval(function(){
        time++; // 1초마다 증가, 타이머의 경우 time--;

        min = Math.floor(time/60);
        hour = Math.floor(min/60);
        sec = time%60;
        min = min%60;

        var th = hour;
        var tm = min;
        var ts = sec;
        
        // 한자리일 경우 처리
        if(th < 10){
            th = "0" + hour;
        }
        if(tm < 10){
            tm = "0" + min;
        }
        if(ts < 10){
            ts = "0" + sec;
        }

        // 함수 호출 당시 받은 object의 html 교체
        obj.innerHTML = th + ":" + tm + ":" + ts;
    }
, 1000);
}

 

여러 개의 타이머 동시 작동 확인