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,结果参考

相关推荐
SEO_juper7 分钟前
用 Python 写一个 GEO 可见性检查脚本:你的网站现在能被 AI 引用吗
开发语言·人工智能·爬虫·python·seo·外贸独立站
西柚小萌新22 分钟前
【LLM&&AI应用开发 八股文】--4.3.Agent智能体(下)
java·开发语言·数据库
北极有牛25 分钟前
cpp学习笔记--常量指针
java·开发语言·算法
回眸&啤酒鸭26 分钟前
【回眸】OpenSwarm 多智能体协作系统实战指南
大数据·前端·人工智能
用户693717500138435 分钟前
2026,程序员的时代拐点到了
android·前端·后端
大龄秃头程序员38 分钟前
一次 iBeacon + BLE 无感解锁方案的实现记录
前端
半杯咖啡半行码1 小时前
C++ 编程与 STL 模板:从泛型编程到内存安全详解
开发语言·c++
小兔子1 小时前
Python 的 GIL 与 free-threading:3.13 之后「去 GIL」走到哪一步了
前端
caoerzhong1 小时前
JeeWMS 开源 WMS 部署避坑指南:Java 仓库管理系统的环境基线、四类根因与可复现交付
java·开发语言·开源
IT_陈寒1 小时前
SpringBoot自动配置差点让我加班到凌晨
前端·人工智能·后端