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

相关推荐
恋猫de小郭2 分钟前
Flutter PC 多窗口最新进展,底层原生窗口句柄支持已合并
android·前端·flutter
踏着七彩祥云的小丑8 分钟前
Python——字符串常用操作
开发语言·python
成都易yisdong13 分钟前
基于C#和WMM2025模型的地磁参数计算器实现
开发语言·c#
LIO15 分钟前
Vue3 + Vite + Pinia + TypeScript 项目完整搭建与实战指南
前端·vue.js
kilito_0117 分钟前
vue官网例子 讲解2
前端·javascript·vue.js
蜡台17 分钟前
Vue实现动态路由
前端·javascript·vue.js·router
Sss_Ass19 分钟前
在Qt Creator创建并编写第一个程序
开发语言·qt
xiao阿娜的妙妙屋123 分钟前
当AI Agent开始自我进化,我们普通人应该怎么办?
前端
sudo_jin24 分钟前
从“谁调用指向谁”到“手写Bind源码”,彻底搞懂JavaScript的this机制
前端·javascript