JS验证码倒计时

js验证码倒计时

手机端的。点击以后开始倒计时 。很简单的东西。

HTML

<div class="register_box">
			<div class="register">
				<input id="tel" type="tel" placeholder="请输入您的手机号" />
			</div>
			<div class="register">
				<input id="code" type="tel" placeholder="请输入验证码" />
				<input id="codeBtn" type="submit" value="获取验证码" />
			</div>
			<div class="register">
				<input id="pwd" type="tel" placeholder="请设置您的密码" />
			</div>
			<div class="register">
				<input id="qq" type="tel" placeholder="请输入您的QQ号" />
			</div>
			<a href="login.html" class="login_go">已有账号？立即登录</a>
			<input id="registerBtn" type="submit" value="注册" />
		</div>

CSS部分我就不贴了。需要的可以找我要。

重点是JS部分，JS直接带了验证和AJAX调用接口。

//注册发送验证码
	$("#codeBtn").click(function(){
			var mobile = $('#tel').val();
			if( mobile == ''){
			alert('请输入手机号');
			}else{
			curCount = count;　　 //设置button效果，开始计时  
			$("#codeBtn").attr("disabled", "true");
			$("#codeBtn").val(curCount + "s后重发");
			InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次  
			};
			$.ajax({
		    	type:"post",
//		    	url:path+"我是接口地址",
//		    	data:{'cmd':'get_message','mobile':mobile},
//		    	success:function(res){
//		    		if(res.code==0){	
//		    		}
//				}
		    });
		});
		var InterValObj; //timer变量，控制时间  
		var count = 60; //间隔函数，1秒执行  
		var curCount; //当前剩余秒数  
		var mobile = $('#tel').val();
		//timer处理函数  
		function SetRemainTime() {
			if(curCount == 0) {
				window.clearInterval(InterValObj); //停止计时器  
				$("#codeBtn").removeAttr("disabled"); //启用按钮  
				$("#codeBtn").val("重新发送验证码");
			} else {
				curCount--;
				$("#codeBtn").val(curCount + "s后重发");
			}
		};