js验证码倒计时
<!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(){
timestimes =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>验证码 </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> 
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-03-09，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读