五秒获取验证码

最新推荐文章于 2021-08-07 17:10:22 发布

Ccc您好

最新推荐文章于 2021-08-07 17:10:22 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44897497/article/details/90181602

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div>
		<input type="text">
		<button>获取验证码</button>
		<div>5秒后获取一个验证码</div>
	</div>
	<script >
	// 1、获取按钮的id
	// 2、点击触发函数；打开间歇式调用，
	// 3、进入函数让变量count由60往下自减；背景灰色
	// 4、时间过完回复红色；
	var btn=document.getElementsByTagName("button");
	// var count=60;
	// var time=null;
	// btn[0].style.background="red";
	// btn[0].style.color="white";
	// btn[0].onclick=function()
	// {
	// 	if(!time)//解决bug
	// 	{
	// 		time=setInterval(fun,200);
	// 		//打开定时器-进行间歇调用
	// 	}
	// }
	// function fun()
	// {
	// 	count--;//让count从60开始自减
	// 	if(count<0)//如果自减到小于0；
	// 	{
	// 		btn[0].innerText="获取验证码";
	// 		btn[0].style.background="red";
	// 		//让按钮回复原状
	// 		btn[0].style.color="white";
	// 		clearInterval(time);
	// 		time=null;
	// 		//清除间歇式调用并将变量time中的id清除；
	// 		count=60;
	// 		//让count回复到60；
	// 	}
	// 	else
	// 	{
	// 		//btn[0].onclick=null;
	// 		btn[0].innerText=count+"秒后重新获取验证码";
	// 		//在自减时让时间变化‘
	// 		btn[0].style.background="grey";
	// 		//背景色为灰色；
	// 	}
	// }
	//-----------------点击5秒后获取验证码；
	// 1、获取到这个div；
	// 2、设置变量time=null;防止点击变快；
	// 3、点击触发函数；并打开开关；
	// 4、或验证码;
	var  div=document.getElementsByTagName("div");
	var time=null;
	div[0].onclick=function()
	{
		if(!time)
		{
			time=setTimeout(function(){
				fun(5);
			},5000);
			//5秒之后调用函数fun并传递参数5；
		}
	}
	// ---开始函数部分
	function fun(n)//用n接收参数获取验证码；
	{
		var str="QWERTYUIOPASDFGHJKLZXCVBNM";
		var newstr="";
		for(var i=0;i<n;i++)
		{
			var ind=Math.floor(Math.random()*str.length);
			//每循环过来一次，获取一个字符串下标范围的数字
			newstr+=str[ind];
			//用获取到的随机数字做下标，将得到的字符放入
			//新串中；
		}
		div[0].innerText=newstr;
		clearInterval(time);
		time=null;
		//清除间歇调用并将time清空；
		//便于下一次点击；只有time变空后才能触发下一次点击；

	}
	</script>
</body>
</html>