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

相关推荐
chao1898445 小时前
基于 SPEA2 的多目标优化算法 MATLAB 实现
开发语言·算法·matlab
赏金术士6 小时前
Kotlin 习题集 · 高级篇
android·开发语言·kotlin
子兮曰6 小时前
Bun v1.3.14 深度解析:Image API、HTTP/3、全局虚拟存储与五十项变革
前端·后端·bun
楼兰公子7 小时前
buildroot 在编译rust时裁剪平台类型数量的方法
开发语言·后端·rust
吴声子夜歌7 小时前
Go——并发编程
开发语言·后端·golang
kyriewen7 小时前
今天,百年巨头一次砍了9200人,而一个离职科学家的实话让全网睡不着觉
前端·openai·ai编程
ooseabiscuit7 小时前
Laravel4.x:现代PHP框架的奠基之作
java·开发语言·php
问心无愧05138 小时前
ctf show web 入门42
android·前端·android studio
c1s2d3n4cs8 小时前
Qt模仿nlohmann::json进行序列化和反序列化
开发语言·qt·json
kyriewen8 小时前
老板逼我上AI,我偷偷在浏览器里跑LLaMA,省下20万API费
前端·react.js·llm