直接上代码
<div class="container">
<div class="demo">
<div style="height: 60px;" id="phone_area">
<span class="red">*</span>
手机号:
<input type="text" class="input" name="phone" id="phone" placeholder="请输入手机号" autocomplete="off"/>
<input type="button" value="获取验证码" class="btn" id="sendPhoneCode" οnclick="send_phone_code()" autocomplete="off"/>
</div>
</div>
</div>
css:
<style type="text/css">
.disabled {
opacity:.6;
filter:alpha(opacity=60)
}
</style>
jq:
<script type="text/javascript">
var wait = 120;//倒计时120秒
var intervalId;//定时
var i = wait;//倒计时递减 1
function exit() {
$("#sendPhoneCode").val(i + "秒后重新发送").addClass("disabled");
i = i - 1;
if (i <= -1) {
clearInterval(intervalId);
$("#sendPhoneCode").removeAttr("disabled");
$("#sendPhoneCode").val("发送验证码").removeClass("disabled");
}
}
function send_phone_code() {
var phone = $("#phone").val();
if (phone == '') {
alert("请输入手机号!");
return false;
}
if (!phone.match(/^(((13[0-9]{1})|159|153)+\d{8})$/)) {
alert("手机号格式有误!");
return false;
}
i = wait;
$.post("ajax.php", {
"phone": phone
}, function(data) {
if (data == 1) {
$("#sendPhoneCode").attr("disabled", "disabled");
$("#sendPhoneCode").val("发送成功");
intervalId = setInterval("exit()", 1000);
}
})
}
</script>
ajax.php 就要看各位的需求自己去写了 我这边就为了方便 直接