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

相关推荐
blammmp13 分钟前
Java:数据结构-枚举
java·开发语言·数据结构
bysking23 分钟前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
何曾参静谧26 分钟前
「C/C++」C/C++ 指针篇 之 指针运算
c语言·开发语言·c++
暗黑起源喵31 分钟前
设计模式-工厂设计模式
java·开发语言·设计模式
WaaTong36 分钟前
Java反射
java·开发语言·反射
Troc_wangpeng37 分钟前
R language 关于二维平面直角坐标系的制作
开发语言·机器学习
王哲晓38 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
努力的家伙是不讨厌的39 分钟前
解析json导出csv或者直接入库
开发语言·python·json
fg_41142 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v43 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试