获取验证码间隔一段时间在获取例子

x125858805

浏览: 480972 次
性别:
来自: 深圳

最近访客更多访客>>

game438951

happyboylj

cjnetwork

lijiawang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端

验证码

<!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>无标题文档</title>
    
    <script src="js/jquery-1.7.2.js"></script>
    
    <script type="text/jscript">
		var times =10; 						//获取验证码间隔时间
		
		/*
		 * 一段时间后显示重新获取验证码
		 */
		function verificationShow(){
			times =times-1;
			var str1="重新获取(" + 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();'/>");
			}
		}
		
		/**
		 * 获取验证码
		 */
		function generateVerification(){
			var mobile = $("#mobile").val();
		 	if(mobile == ""){
				alert("手机号码不能为空。");
				return;
			} 
			
			//验证码间隔时间
			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: '确定'});
		        	}
		        },
		        error:function(data){
		        	
		        }
			});
		}
    </script>
</head>

<body>
	<div >
        <span>手机号码</span><input class="ys_" type="text" name="mobile" id="mobile" placeholder="请输入手机号"/>
    </div>

    <div>
        <span>验证码&nbsp;&nbsp;&nbsp;</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>

(图1)