获取验证码倒计时

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>广告主注册</title>
<link href="__CSS__/index.css" rel="stylesheet" />
<script src="__JS__/jquery-1.9.1.min.js"></script>
<script src="__JS__/index.js"></script>
<script src="__COMM__/js/myPhoto.js"></script>
<script src="__COMM__/js/ajaxfileupload.js"></script>
<script src="__COMM__/js/tusi.js"></script>
</head>

<!--start引入头部-->
<include file="Comm:header" />

<!--start引入头部-->
<body>
<div id="wrap">
<!-- cur-position start -->
<div id="cur-position">
<span class="tit">当前位置:</span>
<a href="#">用户注册</a>
</div>
<!-- cur-position end -->

<div class="list-text-box">
<form id="formpwd">
<div class="fill-list">
<label class="fill-tit">用户名:</label>
<div class="fill-cont">
<input class="fill-ipt" type="text" placeholder="请输入用户名" name = "username" id="username" /><span class="required">*</span>
</div>
</div>
<div class="fill-list">
<label class="fill-tit">密码:</label>
<div class="fill-cont">
<input class="fill-ipt" type="password" placeholder="请输入密码" name = "password" id = "password" /><span class="required">*</span>
</div>
</div>
<div class="fill-list">
<label class="fill-tit">手机号:</label>
<div class="fill-cont">
<input class="fill-ipt" type="text" placeholder="请输入手机号" name = "telphone" id = "telphone" /><span class="required">*</span>
</div>
</div>
<div class="fill-list">
<label class="fill-tit">验证码:</label>
<div class="fill-cont">
<input class="fill-ipt" type="password" placeholder="请输入验证码" name = "yzm" id = "yzm" required="6"/><span class="required">*</span><span><input type="button" value="点击获取验证码" id="butid" onclick="getMobileCode()" /></span>
</div>
</div>
<div class="fill-list">
<label class="fill-tit">&nbsp;</label>
<div class="fill-cont">
<input class="fill-submit" type="button" value="注册" id="advreg" />
</div>
</div>
</form>
</div>

</div>
<!-- footer start -->
<include file="Comm:footer"/>
<!-- footer end -->
<script type="text/javascript">
var downSeconds = 0; //验证码120秒倒计时
var backTelCode = '';
var createDate = 0;
var timer = null;
function getMobileCode(){
var mobile = $.trim($('#telphone').val());
//手机号验证
if(!(/^1[3|4|5|8][0-9]d{4,8}$/.test(mobile))){
alert("不是完整的11位手机号或者正确的手机号前七位");
$('#telphone').focus();
return false;
}
// $('#telphone').disabled;
if(1 < downSeconds){
return false;
}
$.ajax({
url: '{:U("Login/register")}',// 跳转到 action
type: 'post',
async: true, /*true异步执行,false*/
data: {"mobile":mobile},
dataType: 'json',
timeout: 8000,
//beforeSend:function(){ showDoAjaxTips();},
success:function(res) {
console.log(res);
if(res.state){
//hideDoAjaxTips();
backTelCode = res.telcode;
createDate = res.createDate;
downSeconds = 120;
downSecondsTimer();
} else {
tusi(res.msg);
}

},
error : function(xmlHttpRequest, error) {
if( error=='timeout'){ //超时
tusi("网络太差!");
} else {
tusi("系统错误!");
}
}
});
}
function downSecondsTimer(){
timer && clearTimeout(timer);
if(0 > downSeconds){
$('.butid').val('获取验证码');
return;
}
$('.butid').val('还有'+downSeconds+'秒');
downSeconds --;
timer = setTimeout("downSecondsTimer()",1000);
}
</script>

原文地址:https://www.cnblogs.com/finnlee/p/5405483.html