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

news2024/10/7 8:26:03

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.coloradmin.cn/o/1178330.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux中for循环

for do done 复习知识点&#xff1a;cut命令&#xff0c;id命令&#xff0c;finger命令&#xff0c;for循环 程序如上&#xff0c;-d 接分隔符&#xff0c;-f后的数字表示分隔后的列 从结果可以看出&#xff0c;系统上没有finger这个命令&#xff0c;后面会学到yum安装命令&a…

上手SQL语句调优必须了解的内容——Explain

在做性能测试时&#xff0c;资深的性能测试工程师&#xff0c;都会帮助研发同学优化sql语句&#xff0c;听起来很高深&#xff0c;但是具体操作是比较容易的&#xff0c;使用expain命令就可以了&#xff01;本文我会用最简单有效的方式带大家掌握expain的使用方法&#xff01; …

JVM虚拟机:垃圾回收器之Serial(年轻代)

本文重点 本文将介绍年轻代的Serial回收器,它最主要的特征就是串行化的回收器。 运行方式 Serial是一个单线程的收集器,在进行垃圾收集的时候,必须暂停其它所有的工作线程(java程序找一个安全点safe point然后才停止执行,进行等待)直到垃圾回收结束,下的运行状态图如…

迅为iTOP-i.MX8M开发板使用 make 工具

make 工具是编译辅助工具&#xff0c;用来解决使用命令编译工程非常繁琐的问题。 调用这个命令工具&#xff1a;我们在 windows 上编程使用 ide &#xff0c;我们有图形界面&#xff0c;有相应的按钮&#xff0c;比如说 build 或者 run 来编译。其实 make 这个编译辅助工具使…

Dajngo学习笔记(3)

电话号码管理 查看功能 class PrettyNum(models.Model):mobilemodels.CharField(verbose_name"电话号",max_length11)pricemodels.IntegerField(verbose_name"价格")level_choice((1,"一级"),(2,"二级"),(3,"三级"))level…

RISC-V处理器设计(四)—— Verilog 代码设计

一、前言 从6月底刚开始接触 risc-v 架构&#xff0c;到现在完成了一个 risc-v cpu 的设计&#xff0c;并且成功移植了 rt-thread nano 到本 cpu 上运行&#xff0c;中间经过了 4个多月的时间&#xff0c;遇到了数不清的问题&#xff0c;也想过放弃&#xff0c;但好在最后还是…

美国阿贡国家实验室发布快速自动扫描套件 FAST,助力显微技术「快速阅读」成为可能

「我高兴地在北京市的天安门广场上看红色的国旗升起」 快速阅读一下这个句子&#xff0c;大家可能会发现&#xff0c;只需「我在天安门广场看升旗」几个字&#xff0c;就能概述我们需要的信息&#xff0c;也就是说&#xff0c;无需逐字逐句地阅读&#xff0c;抓住重点即可破译…

【flutter no devices】

1.在环境变量增加 ANDROID_HOME 值为&#xff1a;C:\Users\Administrator\AppData\Local\Android\Sdk &#xff08;Android sdk 位置) 2 环境变量的path里面增加2个值&#xff1a; %ANDROID_HOME%\platform-tools %ANDROID_HOME%\tools 3 打开cmd&#xff0c;或者在Android st…

嵌入式Linux和stm32区别? 之间有什么关系吗?

嵌入式Linux和stm32区别? 之间有什么关系吗&#xff1f; 主要体现在以下几个方面&#xff1a; 1.硬件资源不同 单片机一般是芯片内部集成flash、ram&#xff0c;ARM一般是CPU&#xff0c;配合外部的flash、ram、sd卡存储器使用。最近很多小伙伴找我&#xff0c;说想要一些嵌…

【滑动窗口】篮里到底能装 “几个水果” 呢?

Problem: 904. 水果成篮 文章目录 题目分析算法原理分析暴力枚举 哈希表滑动窗口优化数组再度优化 复杂度Code 题目分析 首先我们来分析一下本题的思路 首先我们通过题目的描述来理解一下其要表达的含义&#xff0c;题目给到我们一个fruit数组&#xff0c;里面存放的是每棵树上…

Linux Vim批量注释和自定义注释

使用 Vim 编辑 Shell 脚本&#xff0c;在进行调试时&#xff0c;需要进行多行的注释&#xff0c;每次都要先切换到输入模式&#xff0c;在行首输入注释符"#"再退回命令模式&#xff0c;非常麻烦。连续行的注释其实可以用替换命令来完成。 换句话说&#xff0c;在指定…

推特被封号怎么办?如何防封?

今年社交媒体巨头Twitter正式更名与标示为“X”&#xff0c;这一举措引发了广泛关注和讨论。马斯克称&#xff0c;此举是为了将推特重塑为一个广泛的通信和金融交易平台&#xff0c;打造一个像“微信”一样的万能应用程序&#xff0c;也就是“X”&#xff0c;并承诺推特将迅速进…

外汇天眼:全员免费,赢奖金!

外汇市场一直以来都是金融投资者的热门领域之一&#xff0c;但对于新手来说&#xff0c;了解和掌握外汇交易可能需要时间和经验。为了帮助新手入门&#xff0c;提高交易技能&#xff0c;外汇模拟交易应运而生。为的是能够零风险无压力地帮助外汇投资者更好地掌握外汇交易的技巧…

SonarQube的使用心得

一、使用背景&#xff1a; SonarQube 是一个用于代码质量管理的开源平台&#xff0c;用于管理源代码的质量。 通过插件形式&#xff0c;可以支持包括 java, C#, C/C, PL/SQL, Cobol, JavaScrip, Groovy 等等二十几种编程语言的代码质量管理与检测。 Sonar可以从以下七个维度…

给定n个点或一个凸边形,求其最小外接矩形,可视化

这里写目录标题 原理代码 原理 求n个点的最小外接矩形问题可以等价为先求这n个点的凸包&#xff0c;再求这个凸包的最小外接矩形。 其中求凸包可以使用Graham-Scan算法 需要注意的是&#xff0c; 因为Graham-Scan算法要求我们从先找到凸包上的一个点&#xff0c;所以我们可以先…

CRM 报告:跟踪销售业绩的强大工具

对于希望保持良好客户关系的企业来说&#xff0c;CRM&#xff08;客户关系管理&#xff09;报告是不可或缺的。它使企业能够跟踪客户互动&#xff0c;并利用这些数据改善客户服务。 需要注意的是&#xff0c;CRM 报告不是一次性的&#xff0c;而是一个持续的过程。这是因为客户…

Webpack介绍大全

Webpack 一 、什么是webpack WebPack是一个现代JS应用程序的静态模块打包器&#xff08;module bundler&#xff09; 模块&#xff08;模块化开发&#xff0c;可以提高开发效率&#xff0c;避免重复造轮子&#xff09; 打包&#xff08;将各个模块&#xff0c;按照一定的规则…

“第六十二天”

新东西 %[^\n] 这个题测试的时候不知道哪里为什么一直错一个。 int main() {char a[81] { 0 };fgets(a, 80, stdin);int i 0;int n strlen(a);for(i0;i<n;i){if ((a[i] > a && a[i] < y) || (a[i] > A && a[i] < Y))a[i] 1;else if (a[i…

中介模式(Mediator)

简介 当各个模块的调用变得错综复杂时&#xff0c;可以使用中介模式&#xff0c;用一个中介对象完成对象交互&#xff0c;各个对象不需要显示的相互引用。 创建一个中介对象完成所有的调用&#xff1a;Mediator->A ,Mediator->B,Mediator->C,Mediator->D&#xf…

设计模式—结构型模式之桥接模式

设计模式—结构型模式之桥接模式 将抽象与实现解耦&#xff0c;使两者都可以独立变化。 在现实生活中&#xff0c;某些类具有两个或多个维度的变化&#xff0c;如图形既可按形状分&#xff0c;又可按颜色分。如何设计类似于 Photoshop 这样的软件&#xff0c;能画不同形状和不…