setInterval() 定时器 —— 发送短信验证码倒计时

最新推荐文章于 2024-07-14 15:54:59 发布
最新推荐文章于 2024-07-14 15:54:59 发布
阅读量529 收藏 3
点赞数
文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45645902/article/details/105875093
版权
本文介绍如何使用JavaScript实现点击按钮后启动60秒倒计时，期间按钮禁用并显示倒计时，倒计时结束后恢复按钮功能。
摘要由CSDN通过智能技术生成

 
 
学习来源：https://www.bilibili.com/video/BV1HJ41147DG
 
要求
 点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信。
在这里插入图片描述

在这里插入图片描述

思路
 1、按钮点击之后，使用禁用 disabled = true;
 2、同时按钮里面的内容会变化，注意 button 里面的内容通过 innerHTML 修改
 3、里面秒数是有变化的，因此需要用到定时器
&emsp4、定义一个变量，在定时器里面不断递减，如果变量为0说明到了时间，我们需要停止定时器，并且复原按钮初始状态 disabled = false;。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-w
最低0.47元/天 解锁文章
没人回复我哼
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js使用setInterval实现倒计时
itmyhome的专栏
05-19 1万+
利用setInterval制作简单的js倒计时，点击按钮将触发定时器且按钮不可用html：获取校验码JS： var i; function getCode(){ $("#code").attr({"disabled":"disabled"}); i = self.setInterval("countdown()", 1000); } var int = 1
setInterval() 定时器 - 实现发送短信倒计时
weixin_45663697的博客
04-28 339
知识点 - 清除定时器setInterval() clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。 window.clearInterval(intervalID); 注意： window 可以省略。 里面的参数就是定时器的标识符 。 案例： 发送短信 点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信 案例分析 按钮点击之后，会禁用 disabled 为true 同时按钮里面的内容会变化， 注意 button 里面的内容通过 inne
789-792---BOM（定时器（setInterval() 定时器），案例 ：倒计时，停止setInterval() 定时器，案例：发送短信，this的指向）
weixin_51249285的博客
05-12 361
文章目录BOM3 定时器3.4 setInterval() 定时器案例：倒计时3.5 停止setInterval() 定时器案例：发送短信3.6 this BOM 3 定时器 3.4 setInterval() 定时器 window.setInterval(回调函数,[间隔的毫秒数]); setInterval0方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。 注意:\color{red}{注意:}注意: window可以省略。 这个调用函数可以直接写函数,或者写函数名\color{red}{
JS第四天
I_love_bc的博客
04-05 119
1.BOM概述 1.1什么是BOM BOM ( Browser Object Model )即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。 BOM由- -系列相关的对象构成,并且每个对象都提供了很多方法与属性。 BOM缺乏标准, JavaScript语法的标准化组织是ECMA , DOM的标准化组织是W3C , BOM最初是Netscape浏览器标准的一部分。 DOM ●文档对象模型 ●DOM就是把「文档」当做 一个「对象」来看待 ●DOM的顶级对象是docum
setInterval实现验证码倒数计时及与setTimeOut区别
生存不忘生活
08-25 2226
倒数计时，这是一个很常见的功能，现在大多在注册的时候都会使用手机接收验证码这种形式，回顾一下是有必要的。 有关于计时方面，在js中有两种方法，一个是setTimeOut()，另一个是setInterval() 简单说一下setTimeOut()，这个就好比我们平时设定的闹钟，到了什么时候就提醒一下你，只是这种形式是倒数的形式，类似咱们用cmd命令关机。 语法： setTimeout("al
获取验证码 60秒倒计时 setInterval
adolf双手成就梦想
07-13 1181
用于 注册 验证码 发送后的倒计时显示
小黑小波比.js中setInterval用法倒计时,用于验证码
u010489586的专栏
09-12 1194
js中setInterval与setTimeout用法
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
11-22
在本文中，我们将探讨如何使用jQuery来实现一个发送短信验证码后的倒计时功能，即使在用户关闭页面后也能继续计时。这个功能对于确保用户在规定时间内完成验证过程至关重要，尤其是在涉及安全敏感操作如账户注册或...
基于vue的短信验证码倒计时demo
08-29
基于Vue框架的短信验证码倒计时Demo是近年来非常流行的开发技术，许多开发者在开发过程中都会遇到短信验证码倒计时的需求，本文将详细介绍基于Vue的短信验证码倒计时Demo的实现过程。 什么是短信验证码倒计时？ ...
js短信验证码倒计时（页面刷新无效）
07-25
在网页开发中，短信验证码是验证用户身份的重要手段，它通常与倒计时功能结合，以防止用户频繁发送验证码，减轻服务器压力，并提供良好的用户体验。本文将深入探讨如何实现一个js短信验证码倒计时功能，同时确保在...
微信小程序 短信验证码登录 倒计时 setInterval
03-29
需求：输入手机号 -> 点击获取验证码 -> 进入60s倒计时  (此图片来源于网络，如有侵权，请联系删除! ) 短信验证码登录   data: { seconds: 0, // 读秒 timer: '' // 计时器 }, let that = this // 开始倒计时 that.setData({ seconds: 60, timer: setInterval(function(){ let seconds = that.data.seconds that.setData({ seconds: seconds - 1 }) if (that.data.seconds == 0) { //
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
10-16
- 当倒计时结束时，清除`setInterval`定时器，以停止倒计时。 3. **倒计时逻辑**： - 示例代码中的倒计时从10开始，但实际应用中应从59开始，表示“59秒后重新发送”。 - 示例中定义了`start()`和`stop()`两个...
jquery表单中获取短信验证码倒计时
11-10
在jQuery中实现表单中的短信验证码倒计时功能是一项常见的前端交互设计，它增强了用户体验，同时也确保了用户在请求验证码后必须等待一段时间才能再次发送，防止滥用系统资源。以下将详细讲解如何使用jQuery来实现这...
setInterval 定时器实现验证码倒计时
m0_50789696的博客
04-12 186
1 运行结果 2 HTML结构 <body> <label for="">手机号码：</label><input type="tel" name="" id=""> <button>发送验证码</button> </body> 3 JavaScript 代码 <script> var input = document.querySelector('input'); ..
定时器中断实现定时发送数据&灯的周期性亮灭
houlile_sunny的博客
10-29 1393
在STM32中，有基本定时器通用定时器高级定时器(Advanced-control timer)三类TIM定时器。基本定时器是16位的只能向上计数的定时器，只能用于定时。通用定时器和高级定时器有更多的功能：还可以进行输出比较、输入捕捉等功能。定时器种类位数计数器模式产生DMA请求捕获/比较通道互补输出特殊应用场景高级定时器16向上，向下，向上/下可以4有带可编程死区的互补输出通用定时器32向上，向下，向上/下可以4无通用通用定时器16向上，向下，向上/下。
js使用setInterval，实现获取验证码倒计时
月光秦城
07-29 539
应用场景：点击按钮，获取验证码，倒计时60秒 【html】 <a id="sendVertifyCode" style="width:100px;float: right;color:red;height: 30px;line-height: 30px;">获取验证码</a> <label id="codeMsg" style="width:100px;fl...
setInterval实现倒计时
欢迎来到我的博客
05-16 3585
当做验证码登录时，发送验证码后为了得到更好的体验效果，input选框中应加上倒计时： 代码如下 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" conten
手机短信验证码定时器
YuYan_wang
06-29 628
$(".up_code").click(function(event) { var phone={$phone.phone}; var num = 60; var interval = window.setInterval(function() { $('.up_code').html(--num + 's 重新发送'); if(num == 0) { $('.up_code')...
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 768
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
ReactRouter v6升级的步骤
最新发布
feixin369的博客
07-14 411
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值