Javascript 타이머 만들기

페이지에 남은 시간을 타이머로 표시 시킬려고 한다. 

우선 아래와 같이 1초간격으로 수행되는 setInterval함수를 작성

$(document).ready(function(){
  tid=setInterval('msg_time()',1000); // 타이머 1초간격으로 수행
});
 

이어서, msg_time()을 아래와 같이 작성해준다.

var stDate = new Date().getTime();
var edDate = new Date('2018-10-25 24:00:00').getTime(); // 종료날짜
var RemainDate = edDate - stDate;
 
function msg_time() {
  var hours = Math.floor((RemainDate % (1000 * 60 * 60 * 24)) / (1000*60*60));
  var miniutes = Math.floor((RemainDate % (1000 * 60 * 60)) / (1000*60));
  var seconds = Math.floor((RemainDate % (1000 * 60)) / 1000);
  
  m = hours + ":" +  miniutes + ":" + seconds ; // 남은 시간 text형태로 변경
  
  document.all.timer.innerHTML = m;   // div 영역에 보여줌 
  
  if (RemainDate < 0) {      
    // 시간이 종료 되었으면..
    clearInterval(tid);   // 타이머 해제
  }else{
    RemainDate = RemainDate - 1000; // 남은시간 -1초
  }
}
 

HTML단에 남은 시간이 표시되는 부분을 설정해준다.

<p>남은시간 : <span id="timer"></span></p>
 

* 주의 : Firefox, Chrome 등은 문제 없이 표시되지만 IE경우 NaN이라고 뜬다. 

Date객체 때문인데 IE에서는 위의 종료시간 new Date('2018-05-25 01:00:00')의 날짜를 문자열로 인식해버린다. 

IE의 경우 아래와 같이 해줘야 날짜로 인식..

new Date("26/05/2018 01:00:00")

브라우저 타입에 따라 분기 처리 해주자.