用js如何实现获取验证码

最新推荐文章于 2024-07-09 21:32:23 发布

泽泽泽Ya

最新推荐文章于 2024-07-09 21:32:23 发布

阅读量1.8k

点赞数 2

分类专栏： js学习文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_48466991/article/details/126184822

版权

js学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

先看效果

当你点击获取验证码时，会出现一个5秒的倒计时，此时按钮无法点击，等到结束之后就会出现重新获取字样！

在这里插入图片描述

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn">获取验证码</button>
		<script>
			var _btn=document.querySelector("#btn");
			_btn.onclick=function(){
				var count=5;
				var id=setInterval(function(){
					_btn.innerHTML=count;
					//点击后禁用
					_btn.disabled=true;
					if(count==-1){
						_btn.innerHTML="重新获取";
						//复用
						_btn.disabled=false;
						clearInterval(id);
					}
					count--;
				},1000)
			}
		</script>
	</body>
</html>