Get the verification code after a period of time and get the example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled document</title>
    
    <script src="js/jquery-1.7.2.js"></script>
    
    <script type="text/jscript">
		var times =10; //Get the verification code interval time
		
		/*
		 * After a period of time, the re-acquisition code will be displayed
		 */
		function verificationShow(){
			times =times-1;
			var str1="Retake(" + times + "s)";
			$("#spanVerification").html("<input type='button' style='border-radius: 30px;width: 180px;height: 70px;font-size: 26px;line-height: normal; border: 2px solid rgba(79, 70, 212, 0.15); color: rgba(52, 52, 206, 0.15); background-color: #FFFFFF;' value="+str1+">");
			
			if(times > 0){
				setTimeout(verificationShow , 1000);
			}else{
				times =10;
				$("#spanVerification").html("<input type='button' style='border-radius: 30px;width: 180px;height: 70px;font-size: 26px;line-height: normal;border: 2px solid #4f46d4; background-color: #FFFFFF; color: #3434ce;' value='获取验证码' onclick='generateVerification();'/>");
			}
		}
		
		/**
		 * get verification code
		 */
		function generateVerification(){
			var mobile = $("#mobile").val();
		 	if(mobile == ""){
				alert("Mobile number cannot be empty.");
				return;
			}
			
			// verification code interval
			verificationShow();
			
			$.ajax({
				type:"post",
				url:"<%=path%>/public/getVerificationCode",
		        data:{"mobile":mobile},
		        success:function(data) {
		        	if(data.respCode=="0000"){
		        		alert(data.verification);
		        	}else{
	        		  	layer.open({content: data.respDesc,btn: 'OK'});
		        	}
		        },
		        error:function(data){
		        	
		        }
			});
		}
    </script>
</head>

<body>
	<div >
        <span>Mobile number</span><input class="ys_" type="text" name="mobile" id="mobile" placeholder="Please enter mobile number"/>
    </div>

    <div>
        <span>验证码   </span><input class="ys_" name="verificationCode" id="verificationCode" type="text" maxlength="4" placeholder="请输入验证码"/>
        <span id="spanVerification"><input type="button" style="border-radius: 30px;width: 180px;height: 70px;font-size: 26px;line-height: normal;border: 2px solid #4f46d4;color: bule;background-color: #FFFFFF; color: #3434ce;" value="获取验证码" onclick="generateVerification();"/> </span>
    </div>
</body>
</html>
(figure 1)
(figure 2)
Get the verification code after a period of time and get the example

Guess you like
