原声js n秒后发送验证码

最新推荐文章于 2022-12-29 15:04:40 发布

ppfxdj

最新推荐文章于 2022-12-29 15:04:40 发布

阅读量117

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/ppfxdj/article/details/94357674

版权

前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

在这里插入图片描述
简单易学

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#ipt{height: 20px;width: 100px;border: 1px solid #868686;text-align: center;}
	#btn{height: 20px;width: 100px;border: 1px solid #868686;background: #868686;cursor: pointer;text-align: center;color: #fff; }
	</style>
</head>
<body>
	<div id="ipt">验证码</div><br/>
	<div id="btn" startl="0" >发送验证码</div>
	<script>
		var btn = document.getElementById("btn")
		,	ipt = document.getElementById("ipt");
		ipt.innerHTML = "验证码";
		btn.onclick=function(){
			//改变总的时间 
			var sum = 5;
			if(btn.getAttribute("startl") == "0"){
				btn.setAttribute("startl","1");
				id = setInterval(function(){
					btn.innerHTML = sum + "s后重新获取";
					sum--;
					if(sum<0){
						clearInterval(id);
						ipt.innerHTML = "验证码";
						btn.innerHTML = "重新发送";
						btn.setAttribute("startl","0");
					}
				},1000);
				var num = Math.floor(Math.random()*9000+1000);
				ipt.innerHTML = num;
			}
		}	
		
	</script>
</body>
</html>

ppfxdj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原声js n秒后发送验证码

简单易学<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #ipt{height: 20px;width: 100px;border: 1px solid #868...
复制链接

扫一扫