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

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

news 2026/2/10 1:55:55

一、需求

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

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2026/2/1 20:49:03

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2026/2/7 17:33:19

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/11/20 7:13:43

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2026/1/25 10:16:57

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2026/1/31 4:26:17

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

编程新知 2025/10/2 19:46:59

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

编程新知 2025/11/9 21:54:26

Unity VR/MR开发-VR开发与传统3D开发的差异

视频讲解链接&#xff1a;【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...

编程新知 2026/2/5 4:00:33