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

相关推荐
2501_94452642几秒前
Flutter for OpenHarmony 万能游戏库App实战 - 关于页面实现
android·java·开发语言·javascript·python·flutter·游戏
Dem12 分钟前
怎么安装jdk
java·开发语言
wazmlp0018873695 分钟前
python第一次作业
开发语言·python·算法
墨雪不会编程6 分钟前
C++【string篇4】string结尾篇——字符编码表、乱码的来源及深浅拷贝
android·开发语言·c++
咸鱼2.011 分钟前
【java入门到放弃】VUE部分知识点
java·javascript·vue.js
Engineer-Jsp12 分钟前
A problem occurred starting process ‘command ‘bash‘‘
开发语言·bash
weixin_4896900217 分钟前
MicroSIP自定义web拨打协议
服务器·前端·windows
PnZh0Y119 分钟前
python代码练习1
开发语言·python·算法
sheji341620 分钟前
【开题答辩全过程】以 基于python的图书销售数据可视化系统为例,包含答辩的问题和答案
开发语言·python·信息可视化
_Soy_Milk21 分钟前
【算法工程师】—— Python 高级
开发语言·python·算法