차근차근/JAVA Script

js 3분 카운트 다운

예쁜꽃이피었으면 2022. 12. 7. 14:12
<ul>
	<li>휴대전화번호</li>
	<li>
		<input type="text" name="phone_number" id="phone_number" placeholder="- 없이 번호를 입력해 주세요." maxlength="11" onkeyup="onlyNumber(this)">
		<button type="button" id="btn_sendsms_authNumber" onclick="fn_sendsms_authNumber();">인증번호 받기</button> 
	</li>
	<li>
		<input type="text" name="auth_number" id="auth_number" placeholder="인증번호를 입력해주세요." maxlength="6" onkeyup="onlyNumber(this)">
	 	<button type="button" class="btn-consult_address" onclick="fn_checksms_authNumber();">인증하기</button>
	</li>
	<li><div id="input_timer"></div></li>
</ul>

<input type="hidden" name="authentication_yn" id="authentication_yn" value="">


<script type="text/javascript">

function onlyNumber(obj){
	obj.value = obj.value.replace(/[^0-9]/g,"");
}

function fn_buttonDisabled(){
	//인증번호받기 버튼 누른 후 10초동안 버튼 비활성화
	document.getElementById("btn_sendsms_authNumber").disabled=true;
	
	setTimeout(function(){
		document.getElementById("btn_sendsms_authNumber").disabled=false;
	},10000);

}

//카운트 다운 js 시작
var countDown = 60 * 3; //3분?	
var myTimer;

function fn_countDown(){
	myTimer = setInterval(alertFunc,1000);
}
function alertFunc(){
	var min = countDown / 60;
	min = Math.floor(min);
	
	var sec = countDown - (60 * min);
	//console.log("min : sec = "+min+":"+sec);
	
	if(min.toString().length == 1){
		min="0"+min;
	}
	
	if(sec.toString().length == 1){
		sec="0"+sec;
	}
	
	//화면에 보여지는 부분
	document.getElementById("input_timer").innerHTML = "남은 시간 : "+min + ":"+sec;
	
	if(countDown == 0){ //카운트다운 종료 시
		clearInterval(myTimer);
	}
	countDown--;

	var authentication_yn = document.getElementById("authentication_yn").value; //카운트다운 중 인증이 끝나서 종료
	if(authentication_yn != ''){
		clearInterval(myTimer);
		document.getElementById("input_timer").innerHTML = "";
		return;
	}
	
	
	if(min == 0 && sec == 0 ){
		//console.log("3분 종료");
		clearInterval(myTimer);
		document.getElementById("input_timer").innerHTML = "";
		document.getElementById("phone_number").value = "";
	}


}
//카운트 다운 js 종료

function fn_duplicatePhoneCheck(phoneNumber){
	
	var checkResult = 0;
	//핸드폰 번호 중복체크 ajax
    return checkResult;
	
}

//문자로 난수6자리 발송 ajax
function fn_sendsms_authNumber(){
	
	var phoneNumber = document.getElementById("phone_number").value;

	if(phoneNumber.length != 11){
		alert("휴대전화 번호 11자리를 확인해주세요.");
		return;
	}
	
	var result = fn_duplicatePhoneCheck(phoneNumber);
	if(result > 0){
		//중복이다.
		return;
	}
	
	 $.ajax({
			cache : false,
			url : '/step1?phoneNumber='+phoneNumber,
			type:'GET',
			success : function(Data){
				if(문자발송 성공){
					fn_buttonDisabled();
					fn_countDown(); //3분 카운트다운 시작
				}
			} 
			
		});
}


//문자 발송한 난수와 사용자가 입력한 인증번호 맞는지 확인
function fn_checksms_authNumber(){
	
	var phoneNumber = document.getElementById("phone_number").value;
	if(phoneNumber.length != 11){
		alert("휴대전화 번호 11자리를 확인해주세요.");
		return;
	}
	
	//인증번호 6자리가 맞는지 학인
	var authNumber = document.getElementById("auth_number").value;
	if(authNumber.length != 6){
		alert("인증번호 6자리를 확인해주세요.");
		return;
	}
	
	
	$.ajax({
			cache : false,
			url : '/step2?phoneNumber='+phoneNumber+'&authNumber='+authNumber,
			type:'GET',
			success : function(Data){
				if(인증성공){
					document.getElementById("authentication_yn").value = "Y";
				}else if(인증실패){
					document.getElementById("authentication_yn").value = "N";
				}
			
		});

}

 
</script>
반응형