Timer

/* 타이머 */
function countdown( elementName, minutes, seconds ) {
var elementName, endTime, hours, mins, msLeft, time;
 
function twoDigits( n ) {
            return (n <= 9 ? "0" + n : n);
    }
 
    function updateTimer() {
        msLeft = endTime - (+new Date);
        if ( msLeft < 1000 ) {
            alert("인증번호가 만료되었습니다.", undefined, undefined, "warning");
            $("" + elementName).remove();
            cert_ok = false;
            certificationNum = false;
            $("#cert_ok").val("");
            $("#certBtn").removeClass("blind");
            $("#certOkBtn").removeClass("blind");
        } else {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            $("" + elementName).html((hours ? hours + ':' + twoDigits( mins ) : twoDigits(mins))
            + ':' + twoDigits( time.getUTCSeconds()));
            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
    }

    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
    updateTimer();
}
 
$("<div class='timeout'></div>").insertAfter($("#email"));
countdown(".timeout", 3, 0);

countdown 함수를 이용한다.

파라미터는 클래스 혹은 아이디 값 / 분 / 초 이다.

countdown(".timeout", 3, 0);

.timeout이라는 클래스를 가진 태그에 3분 타이머 실행

위의 예제는 timeout이라는 div 태그를 email 태그 뒤에 삽입하여 3분의 타이머를 작동 시킨다.

시나리오

이메일 입력 후 인증번호 받기 버튼 클릭 -> 인증번호 받기 버튼을 숨기고 타이머를 추가 ->

타이머가 종료되면 인증번호 만료되었다는 팝업 실행 -> 시간 만료 후 인증번호 받기 버튼을 숨김 해제

인증번호 받기 버튼 클릭 -> 타이머 시작

인증시간 만료 팝업 -> 인증번호 받기 버튼 숨김 해제