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

相关推荐
一晌小贪欢几秒前
python-第27天:Python面向对象详解
开发语言·python·数据可视化·面向对象·python办公
默_笙7 分钟前
🚍 一条 Todo 的奇幻漂流:TypeScript 全栈类型安全的"护照检查"
前端·javascript
迪康Defender17 分钟前
公用电脑责任追溯难?迪康端点安全一体化管理系统用户模式详解
java·运维·开发语言·网络·其他·安全
计算机魔术师43 分钟前
NVIDIA 以 129.3 亿美元收购 Hugging Face
前端
平头哥技术团队44 分钟前
Day 01 | 用 HTML 写第一个网页:双击就能在浏览器打开
前端
16月6日-晴1 小时前
Java面向对象——接口
java·开发语言
weixin_422555421 小时前
el-menu子菜单点击就被激活,恢复之前的激活状态
javascript·vue.js·elementui
wuyk5551 小时前
107.FreeRTOS 链表深度解析:从原理到面试满分答案
c语言·开发语言·数据结构·stm32·单片机·链表·面试
geovindu1 小时前
CSharp: Wordcloud
开发语言·后端·c#·.net·.netcore·词云
Java小白笔记2 小时前
Java 实现 ZIP 压缩包生成方案
java·开发语言·网络·7-zip