当前位置： 首页 > news >正文

HTML+CSS+JavaScript：验证码60秒倒计时按钮

news 2026/5/17 12:48:38

一、需求

1、打开浏览器时，按钮禁用，按钮内容为60秒倒计时

2、倒计时结束时，按钮禁用被取消

二、应用场景

1、60秒内不得重新发送验证码

2、我已阅读用户协议（5s）

三、完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>倒计时按钮</title>
</head>
<body><button disabled>倒计时：60秒</button><script>const button=document.querySelector('button')let i=60let timer=setInterval(()=>{i--button.innerHTML=`倒计时：${i}秒`if(i===0){clearInterval(timer)button.disabled=0 //0：取消按钮的禁用}},1000)</script>
</body>
</html>

 

四、注意事项

if判断语句一定要放在间歇函数的里面，否则无法终止定时器。

因为如果判断语句放在间歇函数外，判断语句作为同步任务会被放入执行栈中，程序运行时立刻执行且只执行一次。而间歇函数作为异步任务被放入任务队列中等待执行。

相反地，判断语句放在间歇函数里，每隔一秒，都会进行一次判断，直到i为0时终止倒计时。

相关文章：

HTML+CSS+JavaScript：验证码60秒倒计时按钮

一、需求 1、打开浏览器时&#xff0c;按钮禁用&#xff0c;按钮内容为60秒倒计时 2、倒计时结束时&#xff0c;按钮禁用被取消 二、应用场景 1、60秒内不得重新发送验证码 2、我已阅读用户协议&#xff08;5s&#xff09; 三、完整代码 <!DOCTYPE html> <html l…...

编程日记 2023/8/1 9:55:27

互联网医院系统开发：打造便捷高效的医疗服务平台

随着互联网技术的飞速发展&#xff0c;互联网医院系统的出现为医疗行业带来了许多新的机遇和优势。互联网医院系统是一种基于互联网技术的医疗服务平台&#xff0c;旨在提供便捷、高效、个性化的医疗服务。下面将介绍互联网医院系统开发的优势。 　　提供便捷的医疗服务&#x…...

编程日记 2023/8/1 9:54:22

章节5：SQL注入之WAF绕过

章节5&#xff1a;SQL注入之WAF绕过 5.1 SQL注入之WAF绕过上 WAF拦截原理&#xff1a;WAF从规则库中匹配敏感字符进行拦截。 5.2 SQL注入之WAF绕过下 &#xff08;原理简单了解&#xff09; 关键词大小写绕过 有的WAF因为规则设计的问题&#xff0c;只匹配纯大写或纯小写的…...

编程日记 2023/8/1 9:53:21

iphone卡在恢复模式怎么办？修复办法分享！

iPhone 卡在恢复屏幕问题是 iPhone 用户在软件更新或恢复期间的常见问题。如果你也遇到此问题&#xff0c;不要着急&#xff0c;接下来我们将探讨 iPhone 卡在恢复屏幕上的主要原因&#xff0c;以及如何轻松修复它。 iPhone卡在恢复屏幕问题上没有一个特别的原因&#xff0c;但…...

编程日记 2023/8/1 9:52:20

uniApp禁止遮罩弹窗下的页面滚动

文章目录 问题解决代码 问题 最近用uniApp开发一款软件&#xff0c;页面是可以滚动的长列表&#xff0c;自定义组件弹窗遮罩出来后&#xff0c;滑动屏幕&#xff0c;页面也跟着滚动。研究了网上的解决办法 在遮罩层的最外层的view元素中加入 touchmove.stop.prevent"moveH…...

编程日记 2023/8/1 9:51:19

【Huawei】WLAN实验（三层发现）

拓扑图如上&#xff0c;AP与S1在同一VLAN,S1与AC在同一VLAN&#xff0c;AP采用三层发现AC&#xff0c;AP与客户的DHCP由S1提供。 S1配置 vlan batch 10 20 30 dhcp enable ip pool apgateway-list 192.168.20.1network 192.168.20.0 mask 255.255.255.0option 43 sub-option …...

编程日记 2023/8/1 9:50:07

Windows 10 安装 PostgreSQL 12.x 报错 ‘psql‘ 不是内部或外部命令 由于找不到文件libintl-9.dll等问题

目录 序言一、问题总结问题 1 psql 不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件。问题 2 “由于找不到文件libintl-9.dll&#xff0c;无法继续执行代码&#xff0c;重新安装程序可能会解决此问题。“1、卸载2、安装3、安装 Stack Builder &#xff08;这个可…...

编程日记 2023/8/1 9:49:06

在CSDN学Golang云原生（持续交付Argo）

一&#xff0c;Argo安装配置 Argo是一个基于Kubernetes的容器本地工作流引擎&#xff0c;可以帮助用户在Kubernetes上创建、运行和维护容器化应用程序。下面是Argo安装配置的步骤&#xff1a; 首先确保你已经安装了kubectl和helm添加chart仓库 $ helm repo add argo https:/…...

编程日记 2023/8/1 9:48:05

安全运维 -- splunk 集群配置归档

0x00 背景 splunk 集群索引服务器容量满了以后&#xff0c;为了防止数据丢失&#xff0c;需要对旧数据进行归档保存。 0x01 原理 指定一台大容量服务器&#xff0c;创建共享文件夹&#xff0c;并将集群里的所有indexer指向这个归档共享目录。 0x02 实施 集群的每个indexer都…...

编程日记 2023/8/1 9:47:04

使用kind在mac本地搭建k8s及istio

序 之前使用multipass装ubuntu&#xff0c;然后再用microk8s搭建k8s&#xff0c;这会直接用orbstack及kind在本地搭建k8s及istio 安装 orbstack 通过orbstack这个地址下载&#xff0c;主要是开销低&#xff0c;用来替代docker desktop 添加国内源 ~/.orbstack/config/dock…...

编程日记 2023/8/1 9:46:01

11、springboot项目启动时对容器中的bean进行延迟初始化

springboot项目启动时对容器中的bean进行延迟初始化 预初始化&#xff1a; Spring Boot在启动应用时&#xff0c;会启动Spring容器&#xff0c;当启动Spring容器时&#xff0c;Spring会自动初始化容器中所有的singleton Bean——这是默认行为 预初始化的好处&#xff1a; 1、项…...

编程日记 2023/8/1 9:44:58

树莓派镜像安装 + 设置 + 镜像批量化操作 - 自动化烧写SD Card (三)

简介 仍然强调所有的测试都是来自树莓派3B, 并使用手头上的绿联读卡器进行测试;实现方案: 如 《树莓派镜像安装 设置 镜像批量化操作 - USB boot (二)》中所写&#xff0c; 可以使用树莓派USB挂载方式, 编写自动化脚本, 当有对应的设备出现的时候&#xff0c;格式化 烧写镜…...

编程日记 2023/8/1 9:43:57

C++继承特性(4)——友元与静态

目录 一.继承与友元的关系 二.继承与静态成员的关系 先回顾一下静态成员变量&#xff1a; 运行TestPerson()函数&#xff1a; 测试案例2&#xff1a; 三.练习题&#xff1a; 一.继承与友元的关系 友元关系不能被继承&#xff0c;也就是说父类中的友元函数不能访问子类私…...

编程日记 2023/8/1 9:42:56

VR党建主题数字互动虚拟展馆软件开启党建铸魂育人新篇章

当今时代新媒体技术的发展对大学生的学习、生活等产生着深远的影响。高校作为党建育人的重要场所&#xff0c;充分借助VR技术的强大优势&#xff0c;合理运用到育人工作中&#xff0c;能够不断丰富教育内容。VR智慧党建展厅展馆结合VR技术营造的虚拟现实空间&#xff0c;将党的…...

编程日记 2023/8/1 9:41:50

单网卡实现 双IP 双网段（内外网）同时运行

前提是内外网是同一网线连接&#xff08;双网线双网卡的具体可以自己搜索下。理论上都设置静态IP后把外网跃点设置小&#xff0c;内网跃点设置大&#xff0c;关闭自动跃点设置同一个接口跃点数&#xff0c;在通过命令提示符添加内网网址走内网网关就可以了&#xff09;。 需要使…...

编程日记 2023/8/1 9:40:43

C# 委托2

一.委托 1.委托概述&#xff1a; &#xff08;1&#xff09;声明一个委托类型。委托声明看上去和方法声明相似&#xff0c;只是没有实现块。 &#xff08;2&#xff09;使用该委托类型声明一个委托变量 &#xff08;3&#xff09;创建委托类型的对象&#xff0c;把它赋值给委…...

编程日记 2023/8/1 9:39:41

【计算机网络】网络层协议 -- IP协议

文章目录 1. 网络层做了什么事2. IP协议的简介3. IP协议格式4. 分片与组装5. 网段划分6. 特殊的IP地址7. IP地址的数量限制8. 私网IP地址和公网IP地址9. 路由 1. 网络层做了什么事 保证数据可靠地从一台主机到另一台主机 当双方在进行基于TCP的网络通信时&#xff0c;要保证将数…...

编程日记 2023/8/1 9:38:39

记录浙政钉的消息通知的一次开发实战记录

先忍不住吐槽下钉钉的开发文档&#xff0c;实在是不敢恭维&#xff0c;首先每个术语描述都是不统一的&#xff0c;比如有些地方写“”群聊“”&#xff0c;有些地方写“会话”&#xff0c;有些地方写“钉消息”&#xff0c;总之他们自己想怎么写&#xff0c;怎么写&#xff0c;…...

编程日记 2023/8/1 9:37:38

详解主流的Hybrid App 技术框架与研发方案

移动操作系统在经历了诸神混战之后&#xff0c;BlackBerry OS、Symbian OS、Windows Phone等早期的移动操作系统逐渐因失去竞争力而退出。目前&#xff0c;市场上主要只剩下安卓和iOS两大阵营&#xff0c;使得iOS和安卓工程师成为抢手资源。然而&#xff0c;由于两者系统的差异…...

编程日记 2023/8/1 9:36:34

【软件测试】性能测试工具- LoadRunner的介绍和使用

目录 1. LoadRunner是什么2. LoadRunner环境搭建3. LoadRunner三大组件4. LoadRunner脚本录制4.1 WebTous项目介绍启动WebTous项目访问WebTous项目相关配置 4.2 脚本录制新建脚本录制脚本运行脚本 4.3 脚本加强插入事务插入集合点插入检查点插入日志字符串比较 1. LoadRunner是…...

编程日记 2023/8/1 9:35:31

观察 Taotoken 在多地域请求下的延迟与稳定性表现

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 观察 Taotoken 在多地域请求下的延迟与稳定性表现 对于依赖大模型 API 进行开发的团队而言&#xff0c;服务的延迟与稳定性是影响开…...

编程新知 2026/5/17 11:01:44

用Logisim搞定Educoder交通灯实训：从数码管驱动到状态机集成的保姆级避坑指南

用Logisim征服Educoder交通灯实训&#xff1a;从零搭建到联调的全链路实战手册 第一次打开Educoder平台的交通灯实训项目时&#xff0c;我盯着那些闪烁的数码管和错综复杂的线路图&#xff0c;感觉像在破解某种外星密码。三小时后&#xff0c;当我的第一个状态机模块终于通过测…...

编程新知 2026/5/17 10:42:03

用ZYNQ和LWIP搞定8路ADS8681数据采集：从Vivado Block Design到上位机TCP通信的完整流程

ZYNQ与LWIP构建的8通道高速数据采集系统实战指南 在工业自动化、测试测量和科研领域&#xff0c;多通道高精度数据采集系统正变得越来越重要。本文将详细介绍如何利用Xilinx ZYNQ SoC和LWIP协议栈&#xff0c;构建一个支持8路ADS8681同步采集的实时数据传输系统。不同于简单的代…...

编程新知 2026/5/17 10:18:20

Windows Cleaner终极指南：3步彻底解决C盘爆红问题，让电脑重获新生！

Windows Cleaner终极指南&#xff1a;3步彻底解决C盘爆红问题&#xff0c;让电脑重获新生&#xff01; 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 还在为Wind…...

编程新知 2026/5/17 8:10:55

如何3步获取百度网盘真实下载地址实现满速下载

如何3步获取百度网盘真实下载地址实现满速下载 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 你是否曾被百度网盘的非会员下载速度困扰&#xff1f;当下载重要的工作文件、学…...

编程新知 2026/5/17 7:18:53

飞书自动化脚本开发指南：从API集成到智能审批机器人实战

1. 项目概述&#xff1a;飞书自动化&#xff0c;从“手动”到“自动”的效能革命 如果你每天的工作&#xff0c;有超过30%的时间是在飞书里重复点击、复制粘贴、手动发送消息和整理表格&#xff0c;那么“cicbyte/feishu-atuo”这个项目&#xff0c;很可能就是你一直在寻找的“…...

编程新知 2026/5/17 5:52:44

数据中心碳足迹与可靠性优化框架解析

1. 数据中心碳足迹与可靠性优化的挑战 现代数据中心已成为数字经济的动力引擎&#xff0c;但伴随算力需求的爆炸式增长&#xff0c;其能源消耗与碳排放问题日益凸显。根据最新统计&#xff0c;全球数据中心年耗电量已达4600亿度&#xff0c;占全球总用电量的2%。随着大语言模型…...

编程新知 2026/5/17 5:48:35

基于RAG与向量数据库的智能信息管理系统（IIMS）架构与实现

1. 项目概述&#xff1a;当AI成为你的“第二大脑”最近在折腾一个挺有意思的项目&#xff0c;叫“IIMS-By-AI”。乍一看这个标题&#xff0c;可能有点摸不着头脑&#xff0c;但拆解一下就能明白它的野心&#xff1a;IntelligentInformationManagementSystem&#xff0c; By AI。…...

编程新知 2026/5/17 4:33:40

AI原生编程语言Reia：为LLM设计的编程范式变革

1. 项目概述&#xff1a;Reia&#xff0c;一个面向未来的AI原生编程语言最近在AI和编程语言交叉领域&#xff0c;一个名为Reia的项目引起了我的注意。它来自Quaint-Studios&#xff0c;定位是“AI原生”的编程语言。这听起来有点抽象&#xff0c;但简单来说&#xff0c;Reia试图…...

编程新知 2026/5/17 4:31:36

从零部署开源语音助手：OpenClaw项目实战与二次开发指南

1. 项目概述&#xff1a;从开源代码到可用的语音助手看到leilei926524-tech/openclaw-voice-assistant这个项目标题&#xff0c;我的第一反应是&#xff1a;又一个基于开源代码的语音助手项目。在GitHub上&#xff0c;类似的项目多如牛毛&#xff0c;但真正能让一个普通开发者&…...

编程新知 2026/5/17 4:31:36