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

相关推荐
AI视觉网奇21 分钟前
3d关键点 可视化
开发语言·python·pygame
110546540129 分钟前
11、参数化三维产品设计组件 - /设计与仿真组件/parametric-3d-product-design
前端·3d
向宇it31 分钟前
【unity游戏开发——编辑器扩展】使用EditorGUI的EditorGUILayout绘制工具类在自定义编辑器窗口绘制各种UI控件
开发语言·ui·unity·c#·编辑器·游戏引擎
爱笑的林羽34 分钟前
Mac M系列 安装 jadx-gui
前端·macos
运维@小兵40 分钟前
vue使用路由技术实现登录成功后跳转到首页
前端·javascript·vue.js
肠胃炎42 分钟前
React构建组件
前端·javascript·react.js
Python私教1 小时前
Rust:重新定义系统编程的安全与效率边界
开发语言·安全·rust
邝邝邝邝丹1 小时前
React学习———React.memo、useMemo和useCallback
javascript·学习·react.js
酷爱码1 小时前
HTML5表格语法格式详解
前端·html·html5
hello_ejb31 小时前
聊聊JetCache的缓存构建
java·前端·缓存