[#. Javascript] 휴대폰, 이메일 인증번호 타이머

 

 

 

 

 

버튼을 클릭했을 때 인증번호를 입력할 수 있는 유효시간 타이머가 시작되고

버튼을 다시 클릭했을 시 유효시간 재시작

만료됐을 시 `시간초과`라는 alert와 텍스트가 노출된다

 

 

 

var timer = null;
var isRunning = false;

$("button").on("click", function() {
  var display = $(".time");
  // 유효시간 설정
  var leftSec = 120;

  // 버튼 클릭 시 시간 연장
  if (isRunning){
    clearInterval(timer);
    display.html("");
    startTimer(leftSec, display);
  }else{
  	startTimer(leftSec, display);
  }
});
    
function startTimer(count, display) {  
  var minutes, seconds;
  timer = setInterval(function () {
    minutes = parseInt(count / 60, 10);
    seconds = parseInt(count % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.html(minutes + ":" + seconds);

    // 타이머 끝
    if (--count < 0) {
      clearInterval(timer);
      alert("시간초과");
      display.html("시간초과");
      $("button").attr("disabled", true);
      isRunning = false;
    }
  }, 1000);
  isRunning = true;
}