<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手机短信验证码</title>
<script src="jquery-2.1.4.js"></script>
</head>
<body>
<div>
<div style="vertical-align: middle">
<input id="mobile" type="tel" name="mobile" placeholder="手机号码"/>
<span style="text-align: center;">
<button id="sendmsg">获取验证码</button>
</span>
</div>
</div>
</body>
</html>
<script >
var InterValObj; //timer变量，控制时间
var count = 5; //间隔函数，1秒执行
var curCount;//当前剩余秒数
var code = ""; //验证码
var codeLength = 6;//验证码长度
$(function () {
$('#sendmsg').click(function () {
$.ajax({
type: "post",
// 手机短信验证码发送程序
url: "sendCaptcha.php",
data: "admin=" +"&mobile="+$("#mobile").val() ,
success: function (result) {//通过返回值判断发送状态
// console.log(result);
if(result==0){
curCount = count;
//设置button效果，开始计时
$("#sendmsg").css("background-color", "LightSkyBlue");
$("#sendmsg").attr("disabled", "true");
$("#sendmsg").html("获取" + curCount + "秒");
InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
// alert("验证码发送成功，请查收!");
}
if(result==1){
alert("手机号不匹配!");
}
},
error:function(result){
console.log('error');
},
dataType: 'json'
})
})
})
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止计时器
$("#sendmsg").removeAttr("disabled");//启用按钮
$("#sendmsg").css("background-color", "");
$("#sendmsg").html("重发验证码");
code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
}
else {
curCount--;
$("#sendmsg").html("获取" + curCount + "秒");
}
}
</script>
