前端笔记86——发送验证码的效果

最新推荐文章于 2024-08-19 09:29:46 发布

野生杂学家阿博

最新推荐文章于 2024-08-19 09:29:46 发布

阅读量900

点赞数 1

分类专栏：前端文章标签：前端 JavaScript JS 发送验证码的效果

本文链接：https://blog.csdn.net/chengxu_kuangrexintu/article/details/93250532

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

前言

在日常的开发当中，我们肯定会遇到发送验证码的需求。最可能出现的页面就是登录注册页面，下面分享一下前端利用Js代码去实现发送验证码效果，有兴趣的小伙伴可以复制编译器当中运行查看效果。

JS实现发送验证码的效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">发送验证码</button>
		<script type="text/javascript">
			var oBtn = document.getElementById("btn")
			// 初始化时间
			var time = 10
			oBtn.onclick = function(){
				this.disabled = true
				sendCode()
			}
			function sendCode(){
				time--
				console.log(time)
				oBtn.innerHTML = time+"s后重发"
				if(time>1){
					setTimeout(sendCode,1000)
				}else{
					oBtn.innerHTML = "发送验证码"
					oBtn.disabled = false
					time = 10
				}
			}
		</script>
	</body>
</html>