曲振飞的个人博客

专注于Web全栈开发、APP设计、网站建设

当前位置 : 主页 > 前端开发 > jquery js 实现验证码 60秒后发送

jquery js 实现验证码 60秒后发送

时间:2016-12-02 20:48:47 栏目:前端开发 作者:曲振飞 点击: 279

主要通过setTimeout函数倒计时,计算60秒倒计时时间,使用html中button按钮的disabled属性在发送验证码时设置其属性为true禁止单击,在60秒发送结束在将disabled属性移出。

js代码:

//发送注册验证
	$('#sendCode').click(function(){
		var wait = 10;
		var obj = $(this);
		sendCodes();
		function sendCodes(){
			if (wait == 0) {
				obj.html("获取验证码");
				wait = 10;
				obj.removeClass("codeClick");
				$('#sendCode').removeAttr("disabled"); //移除disabled属性
			}else{
				$('#sendCode').attr('disabled',"true"); //添加disabled属性
				obj.addClass("codeClick");
				obj.html("重新发送"+wait+"s");
				wait--;	
				setTimeout(function(){
					sendCodes();
				},1000);
			}
		}
	});

html代码:

<button id="sendCode" class="col-4 form-control code">获取验证码</button>


关键字: 验证码,60秒发送短信

关于站长

曲振飞,一个热忠、从事于互联网的90后青年.专注于网站建站、网站设计及优化.以用户体验、WEB标准为主旨,将网站的整体设计与网页设计的相关原理紧密结合.