仿手机发送验证码，并在59秒后重试

最新推荐文章于 2022-07-11 11:59:47 发布
最新推荐文章于 2022-07-11 11:59:47 发布
阅读量360 收藏
点赞数
分类专栏： 前端 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46054543/article/details/109860456
版权
本文介绍如何在网页中实现手机发送验证码的功能，包括点击按钮后按钮禁用，设置定时器倒计时，当时间归零时恢复按钮状态。核心思路涉及事件监听、按钮状态控制和时间更新。
摘要由CSDN通过智能技术生成

放手机发送验证码：

先看效果图：

在这里插入图片描述

核心思路如下：

  1. 监听事件
  2. 点击按钮后 按钮不可点击
  3. 添加定时器:
    若时间为零 清除定时器 恢复按钮、内容、时间
    若不为零 更新文本内容 依次减少时间

全部代码如下：

    <div class="box">
        请输入您的手机号码：<input type="number">&nbsp;<button c
最低0.47元/天 解锁文章
产品迪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用selenium模拟登陆，手机验证码
Moken9527的博客
10-02 1680
大众点评 from time import sleep from selenium import webdriver import random def process_request(self,request,spider): phone = '电话号码' driver = webdriver.Chrome() dr...
js实现手机发送验证码功能
10-20
本文主要介绍了js实现手机发送验证码功能的示例。具有很好的参考价值。下面跟着小编一起来看下吧
一个很简单的python程序（模仿手机验证码）
Woo_home的博客
04-15 1524
只用到了两个模块，而且都是python自带的，代码直接复制就可以用，不要问我为什么 import time import random def print_reslut(number): itime=number while itime > 0: print("\r您的验证码为:{:0}".format(random.randint(111111,99999...
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
12-11
倒计时——从10倒数到0，点击按钮会还原倒计时 <body> <!-- 将textvalue值设为10，从10倒数 --> <input type="text" value="10" id="txt"> <input type="button" value="重新开始" id="btn"> </body> [removed] var oT = document.getElementById("txt"); var oB = document.getElementById("btn"); var timer; //封装一个开始倒数的函数 function star
jquery实现手机发送验证码的倒计时代码
10-26
在移动应用和网页开发中，手机发送验证码功能已经成为验证用户身份和提高安全性的重要手段。而为了防止用户频繁发送验证码，通常会引入倒计时机制，限制用户短时间内重复发送。本篇将详细介绍如何使用jQuery实现手机...
C#实现发送手机验证码功能
08-30
开发者应该在代码中加入异常处理逻辑，以确保程序在遇到异常时能够给出用户友好的提示，并进行适当的操作（如重试或记录错误日志）。 8. 第三方服务提供商选择： 为了实现发送手机验证码的功能，开发者需要选择一个...
JS 60秒后重新发送验证码的实例讲解
10-19
在这篇文章中，我们将会学习如何使用JavaScript在网页上实现一个在60秒后可以重新发送手机验证码的功能。这在很多需要验证用户手机号的在线服务中非常常见，如用户注册、密码找回等操作。该功能可以有效防止用户因...
模拟向手机发送动态验证码
weixin_44551909的博客
05-26 1752
模拟向手机发送动态验证码 开发工具与关键技术：VisualStudio C# 作者：老龙 撰写时间：2019/5/26 功能效果： 点击获取验证码的按钮后会对输入的手机号进行判断，当数据库里没有这个账号时会提示为无效账号，获取不了验证码。有账号时电脑会出现验证码，并且进入倒计时，60秒后可再次获取验证码。不勾选已同意按钮就不会解禁登录按钮，验证码输入不正确不能登录，输入过期验证码也不能登录，...
【redis】模拟手机发送验证码
CoderX(远离Bug)的博客
07-11 431
使用redis模拟发送手机验证码
Redis模拟发送手机验证码
Zzz的博客
10-07 348
文章预览：使用redis模拟验证码发送1、需求2、导入依赖3、生成6位数字验证码4、设置验证码（难点）5、校验验证码6、测试 使用redis模拟验证码发送 1、需求 1、输入手机号，点击发送后随机生成6位数字码，2分钟有效 2、输入验证码，点击验证，返回成功或失败 3、每个手机号每天只能输入3次 2、导入依赖 <!-- jedis --> <dependency> <groupId>redis.clients</groupId> <art
微信小程序点击发送短信验证（60秒倒计时）
无知人生，记录点滴
10-18 6058
微信小程序点击发送短信验证（60秒倒计时）   /** * 执行计时，60s后可以重新发送短信验证码 */ countdown: function() { var nsecond = 60; var that = this; var appCount = setInterval(function() { nsecond -= 1; ...
TOTP - 邮箱或手机号验证码生成与验证
lizhongyang21的博客
09-29 1981
TOTP Time-based One-time Password algorithm, 是一种共享密钥和当前时间计算一次性密码的算法。 使用目的 利用时间戳和邮箱生成一段时间内唯一的验证码。验证时使用用户输入的验证码和一段时间内生成的验证码集合对比，如果在此集合，则证明验证码有效。摆脱使用redis等方式存储和对比验证码。 使用 class Totp { private $salt = 'salt'; // 盐 private $refreshInterval = 30; //每隔
js实现手机验证码发送
热门推荐
随风的博客
05-19 1万+
1.通过ajax手机验证码发送实例 2.为了方便用了jquery需要测试时请先导入jquery包 html部分代码 Document 手机号码： /*-------------------------------------------*/ var after =''; var InterValObj; //timer变量，控制时间 var
js 模拟获取验证码
小羽向前跑
02-26 1149
最终效果 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;倒计时自动获取验证码&lt;/title&gt; &lt;/head&gt; &lt;body&gt; 验证码：&am
模拟手机获取验证码
weixin_44540706的博客
07-19 4565
模拟手机获取验证码 开发工具与关键技术： 作者： 撰写时间： 利用display的none和block属性去模拟手机获取验证码。下面的验证码框原本是隐藏的点击获取验证码，当达到某种条件的时候才让它显示出来。 首先，给要隐藏的验证码框一个ID，然后设置它的style样式display为none，然后去写条件。 我写的是一个计时器，一开始先声明按钮的ID，然后是判断条件，判断按钮等于false...
微信小程序点击发送验证码后，60秒倒计时重新发送
weixin_42900082的博客
04-13 622
wxml中： <text wx:if="{{codeType==1}}" bindtap="sendCode" style="margin-top:10rpx">{{codename}}</text> <text wx:if="{{codeType==2}}" style="margin-top:10rpx">{{codename}}</text> js中： 先设置个变量 data:{ // 验证码状态 1:发送验证码 2：重新发送倒计时 code
前端手机发送验证码在发送成功后120秒内禁止重复发送
最新发布
05-24
可以通过以下步骤来实现： 1. 首先，当用户点击发送验证码按钮时，记录下当前时间，可以使用`Date.now()`方法获取当前时间的时间戳。 2. 接着，将当前时间存储在本地存储（localStorage）中。 3. 每次用户点击发送验证码按钮时，先从本地存储中获取上一次发送验证码的时间戳，然后计算当前时间和上一次发送时间的差值（以秒为单位）。 4. 如果差值小于120秒，则禁止用户再次发送验证码，否则允许发送验证码并更新本地存储中的时间戳。 以下是一个示例代码： ```javascript // 获取发送验证码按钮元素 const sendBtn = document.querySelector('#send-btn'); // 发送验证码时间间隔（单位：秒） const interval = 120; // 监听发送验证码按钮点击事件 sendBtn.addEventListener('click', () => { // 获取上一次发送时间戳 const lastSendTime = localStorage.getItem('lastSendTime'); // 获取当前时间戳 const now = Date.now(); if (lastSendTime) { // 计算时间差（单位：秒） const diff = Math.floor((now - lastSendTime) / 1000); if (diff < interval) { // 禁止发送验证码 alert(`请${interval - diff}秒后再发送验证码`); return; } } // 发送验证码 // ... // 更新本地存储中的时间戳 localStorage.setItem('lastSendTime', now); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值