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

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

news 2025/10/20 8:45:26

一、需求

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

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2025/10/20 4:41:23

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/9/28 0:44:00

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/10/19 17:19:35

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/10/19 13:26:36

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2025/9/29 22:24:43

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

编程新知 2025/9/23 1:38:13

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

编程新知 2025/7/7 15:21:47

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

编程新知 2025/10/18 15:38:38

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

编程新知 2025/10/17 18:24:07

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2025/10/11 22:10:51