js实现倒计时

今天和大家分享一个小功能,在我们进行需要获取手机验证码或其他方式的验证码进行登录时会有一个功能,就是当你点击发送验证码时会有一个倒计时,倒计时没有结束时按钮是禁用的状态,防止重复发送短信,下面我们来看一下这个功能使用JS该如何实现。

一、功能分析
按钮点击之后,会禁用按钮,disable为true。
同时按钮里面的内容发生变化,button里面的内容通过innerHTML修改。
同时秒数发送变化,所以我们需要用到定时器。
定义一个变量在定时器里面不断的递减。
如果变量为0时就说明到了时间,我们需要停止定时器并且复原按钮初始状态。
二、具体实现
首先写我们的html部分:
 

<input type="number">
<button>获取验证码</button>

创建一个输入手机号的输入框和一个获取验证码的按钮。

再写我们的js部分:

var but = document.querySelector('button');var time = 10; //定义剩下的秒数but.addEventListener('click', function() {but.disabled = true;var timer = setInterval(function() {if (time == 0) {//清除定时器和复原按钮clearInterval(timer);but.disabled = false;but.innerHTML = '发送';time = 10; //这个10是重新开始} else {but.innerHTML = '剩余' + time + '秒';time--;}}, 1000);})

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

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

相关文章

Electron快速上手

Electron 目录 简介 打包简单的html/css/javascript项目 打包Vue2项目 打包Vue3项目 简介 Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows…

【数据结构】——期末复习题题库(7)

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

C2-4.3.1 多个决策树——随机森林

C2-4.3.1 多个决策树——随机森林 参考链接 1、为什么要使用多个决策树——随机森林&#xff1f; 决策树的缺点&#xff1a; A small change in the data can cause a large change in the structure of the decision tree causing instability 即&#xff1a;对数据集 中…

持续领跑云安全赛道!安全狗多项安全能力获认可

近日&#xff0c;以“数字安全 未来可期”为主题的“2024安全市场年度大会”在北京成功举行。 作为国内云原生安全领导厂商&#xff0c;安全狗也受邀出席此次活动。 厦门服云信息科技有限公司&#xff08;品牌名&#xff1a;安全狗&#xff09;创办于2013年&#xff0c;是国内领…

每日论文推送(有中文摘或源码地址或项目地址)

***VX搜索“晓理紫”并关注就可以每日获取最新论文***标题: “It’s not like Jarvis, but it’s pretty close!” – Examining ChatGPT’s Usage among Undergraduate Students in Computer Science作者: Ishika Joshi, Ritvik Budhiraja, Harshal D Akolekar摘要: Large lan…

Redis主从复制哨兵及集群

目录 一.主从复制 主从复制的工作原理如下&#xff1a; 主从复制的作用&#xff1a; 搭建Redis 主从复制 每台服务器配置&#xff1a; ​编辑进行编译安装&#xff1a; 定义systemd服务管理脚本&#xff1a; 开启服务&#xff0c;报错看下内容&#xff1a; 修改 Redis…

【JavaScript】es6开发常用技巧

1.如何隐藏所有指定的元素 const hide (el) > Array.from(el).forEach(e > (e.style.display none)); // 事例: 隐藏页面上所有<p>元素 hide(document.querySelectorALL(p))2.如何检查元素是否具有指定的类&#xff1f; 页面DOM里面的每个节点上都有一个 $\colo…

Python 日志模块 logging 的最佳实践,内容干练简洁

文章目录 1. 引言2. 定义日志类3. 引用日志4. 参考 1. 引言 每次写 python 代码&#xff0c;想找一个日志模块 logging 的最佳实践&#xff0c;都要找一大圈&#xff0c;确不一定可以找到合适的最佳实践。 痛定思痛&#xff0c;我决定下笔记录目前觉得合适的 python 日志的用…

代码混淆:保护您的应用程序

目录 引言 什么是代码混淆&#xff1f; 代码混淆常见手段 代码混淆的作用 代码混淆可能带来的问题 常用的混淆工具 如何使用ipaguard进行混淆 总结 引言 在当今数字化时代&#xff0c;移动应用程序已经成为人们生活和工作中不可或缺的一部分。但是&#xff0c;随着应用…

Go语言实现数据结构栈和队列

Go语言实现数据结构栈和队列 1、栈 package mainimport "fmt"func main(){// 创建栈stack : make([]int, 0)// push压入栈stack append(stack, 10)// pop弹出v : stack[len(stack)-1]// 10fmt.Println(v)stack stack[:len(stack)-1]// 检查栈空// truefmt.Printl…

PPT插件-大珩助手-清除同类

清除同类-颜色 对于选定的形状&#xff0c;删除相同颜色 清除同类-文本 删除当前幻灯片中的文本对象 清除同类-非文本 删除当前幻灯片中的非文本对象 清空当页 删除当前幻灯片中的所有对象 选中的形状动画 删除选中的对象上的形状动画 当前页形状动画 对于当前页中的…

2023.9.1最长上升子序列

56368795 最长上升子序列&#xff1a;5679(严格小于号连接&#xff0c;LIS 最长不降子序列&#xff1a;56679&#xff08;&#xff1c;连接,LNDS 最长下降子序列&#xff1a;875(LDS 最长不升子序列&#xff1a;665(LNIS 上升子序列最小划分数&#xff1a;划分成多个上升子…

MIB 变更周期

MIB 始终以 80 ms 的周期在 BCH 上传输并在 80 ms 内重复&#xff0c;并且它包括从小区获取 SIB1 所需的参数&#xff1b;如果 SSB 的周期大于 80 ms&#xff0c;则 MIB 的发送周期与 SSB 的周期相同。 在UE初始搜索时&#xff0c;SSB在半帧内的周期是20ms&#xff1b;所以对于…

Kotlin Collection KTX:让你的集合操作如丝般顺滑

当今移动应用开发&#xff0c;常常需要使用各种集合类型来存储和操作数据。Kotlin 提供了 Collection KTX 扩展库&#xff0c;为我们操作集合提供了非常方便的 API。在本篇文章中&#xff0c;我们将介绍 Collection KTX 中包含的所有扩展函数&#xff0c;让你的集合操作变得更加…

2024系统分析师---论软件的可靠性设计

摘要&#xff1a; 本人于2018年1月参与了中石化XX油田XX采油厂“用电管理系统”的项目建设&#xff0c;该系统建设目标是实现分单位、分线路、分系统评价、优化、考核&#xff0c;全面提升采油厂用电管理水平。在该项目组中我担任系统架构师一职&#xff0c;主要负责系统整体架…

Linux第23步_安装windows下的stm32cubeprogram软件

stm32cubeprogram软件是通过USB3.0接口烧写系统软件。 1、双击“05、开发工具\02、ST官方开发工具\en.stm32cubeprog_v2-5-0\SetupSTM32CubeProgrammer-2.5.0.exe”。 2、点击“Next” 3、点击“Next” 4、勾选“I agree”&#xff0c;点击“Next” 5、点击“Next” 6、点…

阴盘奇门八字排盘马星位置计算方法php代码

如下位置&#xff0c;马星的四个位置。 计算方法&#xff1a; 1。先根据出生年月日&#xff0c;计算得八字四柱。比如 2024年01月09日&#xff0c;四柱为 其中时柱地支为“申” 2。然后根据以下对应的数组&#xff0c;来找到id号&#xff0c;即马星位置。 根据下表来找到&am…

iPhone语音备忘录怎么导出?这3种方法任你选择!

作为iPhone用户&#xff0c;我们应该会经常使用语音备忘录来记录一些重要的信息。有时候&#xff0c;我们可能需要将这些语音备忘录导出&#xff0c;以方便分享或备份。iphone语音备忘录怎么导出&#xff1f;今天&#xff0c;小编将为大家介绍3种导出iPhone语音备忘录的方法&am…

阿里云RDMA通信库XRDMA论文详解

RDMA(remote direct memory access)即远端直接内存访问&#xff0c;是一种高性能网络通信技术&#xff0c;具有高带宽、低延迟、无CPU消耗等优点。RDMA相比TCP在性能方面有明显的优势&#xff0c;但在编程复杂度上RDMA verbs却比TCP socket复杂一个数量级。 开源社区和各大云厂…