반응형
var timer;
var isRunning = false;
$(function(){
var hp_bt1 = $('.owner_step3 .hp_box1 .bt_box ul li:first-child a');
var hp_bt2 = $('.owner_step3 .hp_box1 .bt_box ul li:last-child a');
var hp2_bt1 = $('.owner_step3 .hp_box2 .bt_box ul li:first-child a');
var hp2_bt2 = $('.owner_step3 .hp_box2 .bt_box ul li:last-child a');
$(hp_bt2).on('click', function(){
$('.owner_step3 .hp_box2').show();
$(hp_bt2).parent().hide();
sendAuthNum();
return false;
});
$(hp2_bt2).click(function(){
$(hp_bt1).parent().css({"display":"inline-block"});
isRunning = true;
sendAuthNum();
$('.owner_step3 .hp_box2').hide();
return false;
});
$(hp2_bt1).click(function(){
isRunning = false;
$(hp_bt1).parent().hide();
sendAuthNum();
return false;
});
});
function sendAuthNum(){
// 남은 시간
var leftSec = 180,
display = document.querySelector('#timer');
// 이미 타이머가 작동중이면 중지
if (isRunning){
clearInterval(timer);
}else{
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;
alert('시간이 초과 되었습니다.');
}
}, 1000);
}
※상태 값에 따라 다르게 보이며 초기화 시켜야함!
728x90
반응형
'JS & jQuery' 카테고리의 다른 글
자바스크립트 ip 확인 (0) | 2022.03.07 |
---|---|
자바스크립트 배열 (0) | 2022.03.07 |
콤마 추가 및 삭제 출력 (0) | 2022.03.07 |
이미지 저장막기 (0) | 2022.03.07 |
반원그리기 (0) | 2022.03.07 |