js中两种定时器，setTimeout和setInterval实现验证码发送

最新推荐文章于 2024-01-17 09:40:22 发布

qq_32718869

最新推荐文章于 2024-01-17 09:40:22 发布

阅读量940

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_32718869/article/details/81515588

版权

本文详细介绍了一种在网页上实现验证码倒计时功能的方法，使用了两种不同的JavaScript定时器：setInterval和setTimeout。通过点击按钮触发倒计时，限制用户在一定时间内无法重复请求验证码，提高了用户体验和安全性。

摘要由CSDN通过智能技术生成

验证码发送按钮：

<input type="button" value="获取验证码" class="btn btn-default" id="validCode"/>

1、setInterval:

//页面加载函数
	$(function(){
		
		/************************获取验证码点击事件********************************/
		$("#validCode").click(function(){
			calTime();
			timer = window.setInterval(calTime,1000);
		});
		
	});
	
	var time = 6;
	function calTime(){
		if(time>0){
			$("#validCode").val("("+time+"s)后重发");
			$("#validCode").prop("disabled",true);
			time--;
		}else{
			window.clearInterval(timer);
			$("#validCode").val("点击重发");
			$("#validCode").prop("disabled",false);
			time = 6;
			return;
		}
	}

2、setTimeOut：

	//页面加载函数
	$(function(){
		
		/************************获取验证码点击事件********************************/
		$("#validCode").click(function(){
			calTime();
		});
		
	});
	
	var time = 6;
	function calTime(){
		if(time>0){
			$("#validCode").val("("+time+"s)后重发");
			$("#validCode").prop("disabled",true);
			time--;
		}else{
			$("#validCode").val("点击重发");
			$("#validCode").prop("disabled",false);
			time = 6;
			return;
		}
		//window.setTimeout("calTime()",1000);
		window.setTimeout(calTime,1000);
	}