web前端JS基础------制作一个获取验证码

1,需要一个定时器,和一个button,通过点击事件启动获取验证码

2,参考代码如下

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/126535.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

RapidSSL证书

RapidSSL是一家经验丰富的证书颁发机构&#xff0c;主要专注于提供标准和通配符SSL证书的域验证SSL证书。在2017年被DigicertCA收购后&#xff0c;RapidSSL改进了技术并开始使用现代基础设施。专注于为小型企业和网站提供基本安全解决方案的SSL加密。RapidSSL它具有强大的浏览器…

Python中的Socket编程

目录 一、概述 二、Socket的基本概念 三、Python中的Socket编程 四、Socket的高级功能 1、多路复用&#xff08;multiplexing&#xff09;&#xff1a; 2、非阻塞式IO&#xff1a; 3、SSL加密&#xff1a; 4、服务端编程&#xff1a; 五、Socket编程的常见问题及解决方…

基于Quartz实现动态定时任务

生命无罪&#xff0c;健康万岁&#xff0c;我是laity。 我曾七次鄙视自己的灵魂&#xff1a; 第一次&#xff0c;当它本可进取时&#xff0c;却故作谦卑&#xff1b; 第二次&#xff0c;当它在空虚时&#xff0c;用爱欲来填充&#xff1b; 第三次&#xff0c;在困难和容易之…

深入探析隔离CAN收发器NSI1050-DDBR各项参数

NSI1050-DDBR是一个隔离的CAN收发器&#xff0c;可以完全与ISO11898-2标准兼容。 NSI1050-DDBR集成了两个通道的数字隔离器和一个高电平可靠性CAN收发器。 数字隔离器是基于Novosense电容隔离技术的氧化硅隔离。 高度集成的解决方案可以帮助简化系统设计并提高可靠性。 NSI1050…

Yolov8模型训练报错:torch.cuda.OutOfMemoryError

最近在使用自己的数据训练Yolov8模型的时候遇到了很多错误&#xff0c;下面将逐一解答。 问题报错 在训练过程中红字报错&#xff1a;torch.cuda.OutOfMemoryError: CUDA out of memory. 后面还会跟着一大段报错&#xff1a; Tried to allocate XXX MiB (GPU 0; XXX GiB to…

Vue23-props配置功能

Vue2&3-props配置功能 Vue2-props配置 功能&#xff1a;接收从其他组件传过来的数据&#xff0c;将数据从静态转为动态注意&#xff1a; 同一层组件不能使用props&#xff0c;必须是父组件传子组件的形式。父组件传数据&#xff0c;子组件接收数据。不能什么数据都接收&a…

EMNLP2023 | LLM作用下的成分句法分析基础研究

深度学习自然语言处理 原创作者&#xff1a;cola 自训练已被证明是一种有效的针对跨域任务的方法。传统的自训练方法依赖于有限且低质量的源语料库。为克服这一限制&#xff0c;本文提出用大型语言模型(LLM)增强自训练&#xff0c;以迭代地生成特定领域的语料库。并针对句法成分…

JavaEE初阶学习:Linux 基本使用和 web 程序部署

1.Linux的基本认识 Linux 是一个操作系统.(搞管理的系统) 和Windows都是同类产品~~ Linux 实际的场景: 1.服务器 2.嵌入式设备 3.移动端(手机)Android 其实就是Linux 1991年,还在读大学的 芬兰人 Linus Benedict Torvalds,搞了一个Linux 这样的系统0.01版,正式发布了~ 后…

Docker学习——⑥

文章目录 1、什么是存储卷?2、为什么需要存储卷?3、存储卷分类4、管理卷 Volume5、绑定卷 bind mount6、临时卷 tmpfs7、综合实战-MySQL 灾难恢复8、常见问题 1、什么是存储卷? 存储卷就是将宿主机的本地文件系统中存在的某个目录直接与容器内部的文件系统上的某一目录建立…

js各种简单事件处理(整理)

**## 获取当天昨天日期** // 当天日期 const today new Date();// 格式化当天日期为 YYYY-MM-DD 格式 const formattedToday today.toISOString().slice(0, 10);// 昨天日期 const yesterday new Date(); yesterday.setDate(yesterday.getDate() - 1);// 格式化昨天日期为 Y…

并查集模版以及两道例题

&#x1f4af; 博客内容&#xff1a;并查集 &#x1f600; 作  者&#xff1a;陈大大陈 &#x1f680; 个人简介&#xff1a;一个正在努力学技术的准C后端工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎私信&#xff01; &#x1f496; 欢迎大家&#xff1a;这里是C…

DVWA - 2

文章目录 SQL Injectionlowmediumhigh SQL Injection low 输入 1&#xff0c;可以展示 id 1 的人员信息&#xff1a;输入 1’&#xff0c;有报错信息。可以看出是mysql数据库&#xff0c;‘‘1’’’ 去除两边的引号&#xff0c;再去除1两端的引号&#xff0c;可以看出闭合符…

Thales hsm是什么意思,有什么作用?

Thales HSM是一种硬件安全模块(Hardware Security Module&#xff0c;HSM)&#xff0c;是Thales公司开发的一种安全设备&#xff0c;用于保护和管理密码和数字证书。HSM是一种物理设备&#xff0c;通常用于需要高度安全性的环境中&#xff0c;如政府机构、金融机构、大型企业等…

底座(基座)模型是如何训练的?

我们把LLM的基本训练步骤分为两步&#xff0c;预训练和对齐&#xff1b;预训练我们非常熟悉&#xff0c;是bert-finetuning时代的基本原理&#xff0c;只不过LLM一般遵循自回归的逻辑&#xff0c;因此使用GPT模型的预训练方式&#xff1a;CLM&#xff08;具备因果关系的MLM&…

【Java 进阶篇】Java Filter 过滤器拦截路径配置详解

过滤器&#xff08;Filter&#xff09;是 Java Web 应用中一种强大的组件&#xff0c;它可以用于在请求到达目标资源之前或响应返回客户端之前执行一些预处理或后处理操作。其中&#xff0c;过滤器的拦截路径配置是非常重要的&#xff0c;它决定了过滤器会拦截哪些请求。在本文…

Kotlin系列之注解详解

目录 注解&#xff1a;file:JvmName 注解&#xff1a;JvmField 注解&#xff1a;JvmOverloads 注解&#xff1a;JvmStatic 注解&#xff1a;JvmMultifileClass 注解&#xff1a;JvmSynthetic 注解&#xff1a;file:JvmName file:JvmName(“XXX”) 放在类的最顶层&#x…

浏览器添加油猴(tampermonkey)扩展

msedge浏览器为例 1.打开msedge浏览器 2.点击右上角省略号 3.点击扩展 4.点击管理扩展 5.点击获取 Microsoft Edge 扩展 6.搜索 tampermonkey 7.获取自己想要安装的油猴

kubernetes helm

目录 一、helm 二、部署helm 三、封装chart包 四、上传chart到OCI仓库 五、部署wordpress博客系统 六、helm部署storageclass 七、helm部署ingress-nginx 八、helm部署metrics-server 九、kubeapps 一、helm Helm是Kubernetes 应用的包管理工具&#xff0c;主要用来…

经销商管理怎么做?

有人说&#xff0c;谁占据了渠道&#xff0c;谁就拥有了销售的大半个江山。在渠道为王的时代&#xff0c;每个企业都想快速打开市场&#xff0c;以渠道铺设自己的销路&#xff0c;捞取一桶桶金。因此&#xff0c;占领渠道&#xff0c;将渠道管理好是企业&#xff0c;尤其是快消…

K8S概念与架构

K8S概念与架构 一、Kubernetes 概述1、K8S 是什么2、为什么要用 K8S3、k8s介绍二、Kubernetes 集群架构与组件2.1、Master核心组件 2.2、Node核心组件 三、Kubernetes 核心概念3.1、Pod 控制器 一、Kubernetes 概述 1、K8S 是什么 K8S 的全称为 Kubernetes (K12345678S)&…