web前端JS基础------制作一个获取验证码

1,需要一个定时器,和一个button,通过点击事件启动获取验证码

2,参考代码如下

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="btn" id="btn" value="获取验证码" /><!-- 用于获取验证码的按钮标签 -->
			<script type="text/javascript">
				var btn = document.getElementById('btn');//通过ID获取到该标签
				var num = 60;//设置获取验证码持续时间
				btn.onclick = function(){//通过点击事件,启动获取验证码函数
					cd();
				}	
				
				function cd(){		//定义验证码获取函数
					num--;
					if(num==0){
						num = 60;
						btn.disabled = false;
						btn.value = '获取验证码';
						return;
					}
					btn.disabled = true;//正在获取验证码
					btn.value = num + 's后重新获取';
					setTimeout('cd()',1000);.//采用setTimeout函数每秒调用一次cd()
				}
				
			</script>
	</body>
</html>

3,结果参考

相关推荐
veneno2 小时前
大量异步并发请求控制并发解决方案
前端
Mr_Xuhhh2 小时前
YAML相关
开发语言·python
i***t9192 小时前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
咖啡の猫2 小时前
Python中的变量与数据类型
开发语言·python
前端达人2 小时前
你的App消息推送为什么石沉大海?看Service Worker源码我终于懂了
java·开发语言
oden2 小时前
2025博客框架选择指南:Hugo、Astro、Hexo该选哪个?
前端·html
汤姆yu2 小时前
基于springboot的电子政务服务管理系统
开发语言·python
小光学长2 小时前
基于ssm的宠物交易系统的设计与实现850mb48h(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
java·前端·数据库
云中飞鸿2 小时前
函数:委托
javascript
全栈师2 小时前
C#中控制权限的逻辑写法
开发语言·c#