HTML+Jquery获取验证码的倒计时

最新推荐文章于 2024-07-20 21:16:51 发布

banannBoy

最新推荐文章于 2024-07-20 21:16:51 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/amazing_banana/article/details/84945745

版权

首先我们要先写一个获取验证码的按钮，需要用到Jquery的代码。

<input type="button" value="获取验证码" />

我们知道验证码点击一次之后不可再点这就需要我们设置点击事件的属性disabled，除此之外我们还要设置定时器，倒计时完了之后要清除定时器。

//验证码的设置
	var c = 60;
	$(".login_input2").click(function(){
		$(".login_input2").attr("disabled","disabled");//点击一次不可再点
		var interval = setInterval(function(){//定义定时器
			$(".login_input2").val(c+"s之后重试");
			c--;
			if(c == 0){
				clearInterval(interval);//清除定时器
				$(".login_input2").val("重新获取验证码");
				$(".login_input2").removeAttr("disabled");//删除这个属性
				c=60;
			}	
		},1000);
	});

设置开始的秒数，点击完之后定时器开始出现，接下来我们要做一个判断如果倒计时到0的情况，如果到0我们要清除定时器，然后删除disabled这个属性，如果不删除按钮不可点击，接下来重置秒数就可以了。