html部分
<input type="number" class="form-control mar phone1" placeholder="请输入手机号">
<div style="position: relative;">
<input type="number" class="form-control mar code1" placeholder="请输入验证码">
<input type="button" class="code" id="codes" onclick="phones()" value="验证码">
</div>
效果如下:
js部分(注意:disabled只对input产生效果)
//获取验证码
var phoneReg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;//最新的手机号正则
var count = 60; //间隔函数,1秒执行
var InterValObj1; //timer变量,控制时间
var curCount1;//当前剩余秒数
/*第一*/
function phones(){
var phone = $.trim($('.phone1').val());
curCount1 = count;
var phone = $.trim($('.phone1').val());
if (!phoneReg.test(phone)) {
alert(" 请输入有效的手机号码");
return false;
}if(phone!=undefined){
//设置button效果,开始计时
$("#codes").attr("disabled", "true");
InterValObj1 = window.setInterval(SetRemainTime1, 1000);
//向后台发送处理数据
sendVCode(phone,function (data){
if(data.result==0){
alert('发送成功')
}else{
alert(data.msg)
}
},function (res){
alert('发送失败')
})
}
}
function SetRemainTime1() {
if (curCount1 == 0) {
window.clearInterval(InterValObj1);//停止计时器
$("#codes").removeAttr("disabled");//启用按钮
$("#codes").val("重新获取");
}else {
curCount1--;
$("#codes").val(curCount1 + "s重获");
}
}