获取验证码倒计时效果

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重获");
		}
		
	} 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值