js获取手机验证码倒计时的实现

方案一

<div class="div user-input">
<input type="number" class="code" name="verify" placeholder="请输入手机验证码" required maxlength="6">
<input type="button" class="obtain generate_code" value=" 获取验证码">
</div>
<script type="text/javascript">
$(function(){
$(".generate_code").click(function(){
var disabled = $(".generate_code").attr("disabled");
if(disabled){
return false;
}
if($("#mobile").val() == "" || isNaN($("#mobile").val()) || $("#mobile").val().length != 11 ){
alert("请填写正确的手机号！");
return false;
}
$.ajax({
async:false,
type: "GET",
url: "{:U('User/sms')}",
data: {mobile:$("#mobile").val()},
dataType: "json",
async:false,
success:function(data){
console.log(data);
settime();
},
error:function(err){
console.log(err);
}
});
});
var countdown=60;
var _generate_code = $(".generate_code");
function settime() {
if (countdown == 0) {
_generate_code.attr("disabled",false);
_generate_code.val("获取验证码");
countdown = 60;
return false;
} else {
$(".generate_code").attr("disabled", true);
_generate_code.val("重新发送(" + countdown + ")");
countdown--;
}
setTimeout(function() {
settime();
},1000);
}
})

</script>

方案二

<div class="div user-input">
<input type="number" class="code" placeholder="请输入手机验证码" required maxlength="6">
<input type="button" class="obtain generate_code" value=" 获取验证码" onclick="settime(this);">
</div>
<script type="text/javascript">

//倒计时
var countdown=60;
function settime(val) {
if (countdown == 0) {
val.removeAttribute("disabled");
val.value="获取验证码";
countdown = 60;
return false;
} else {
val.setAttribute("disabled", true);
val.value="重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function() {
settime(val);
},1000);
}
</script>

原文地址http://blog.csdn.net/hj7jay/article/details/51433828