Javascript

[Javascript] 인증번호 타이머

chsr 2022. 3. 22. 15:21
728x90
반응형

■ Javascript 인증번호 타이머


■ 사용법

<span id="timer"></span>

<script type="text/javascript">
    var timer;
    var isRunning = false;

    // 인증번호 발송 및 타이머 함수 실행
    function sendAuthNum(){
        // 남은 시간(초)
        var leftSec = 60,
        display = document.querySelector('#timer');
        // 이미 타이머가 작동중이면 중지
        if (isRunning){
            clearInterval(timer);
        }
        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.textContent = minutes + ":" + seconds;
            // 타이머 종료
            if (--count < 0) {
                clearInterval(timer);
                display.textContent = "";
                isRunning = false;
            }
        }, 1000);
        isRunning = true;
    }
</script>

 

728x90
반응형