시간 줄어드는 타이머 만들기

시간 제한이 있는 게임을 할 때 사용할 수 있는 타이머를 만들어 보았다.

setInterval()함수를 사용해서 하면 되고,

줄어드는 시간을 보여주기 위한 html을 만들었다.

• HTML

<p>
 <label for="Timer">남은 시간:</label>
 <input id="Timer" type="text" value="" readonly/>
</p>

나중에 접근성 이슈가 있을 경우를 대비해 input태그를 사용했다.

 

• JS

3분을 제한 시간으로 두었을 경우의 예이다.

setInterval(1000) = 1초 이다, 여기에  *3분(180초) => 180,000

변수로 총 시간 = 180000;

줄어드는 시간을 보여주기 위해 min=3; sec=60; 을 선언해주고,

3:00 부터 줄어들어야 하니, 페이지 로딩시 바로 출력되도록  value값에 넣어준다.

 

1초에 한번씩 반복되는

      setInterval(function({

             time=-1000;

       },1000) 로 1초 마다 1초씩 줄어들도록 만들어준다.

const Timer=document.getElementById('Timer'); //스코어 기록창-분
let time= 180000;
let min=3;
let sec=60;


Timer.value=min+":"+'00'; 

function TIMER(){
    PlAYTIME=setInterval(function(){
        time=time-1000; //1초씩 줄어듦
        min=time/(60*1000); //초를 분으로 나눠준다.

       if(sec>0){ //sec=60 에서 1씩 빼서 출력해준다.
            sec=sec-1;
            Timer.value=Math.floor(min)+':'+sec; //실수로 계산되기 때문에 소숫점 아래를 버리고 출력해준다.
           
        }
        if(sec===0){
         	// 0에서 -1을 하면 -59가 출력된다.
            // 그래서 0이 되면 바로 sec을 60으로 돌려주고 value에는 0을 출력하도록 해준다.
            sec=60;
            Timer.value=Math.floor(min)+':'+'00'
        }     
   
    },1000); //1초마다 
}


TIMER();
setTimeout(function(){
    clearInterval(PlAYTIME);
},180000);//3분이 되면 타이머를 삭제한다.