按钮发送验证码后显示倒计时

最新推荐文章于 2022-02-11 15:28:59 发布
最新推荐文章于 2022-02-11 15:28:59 发布
阅读量4.4k 收藏 3
点赞数 3
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42821697/article/details/109462886
版权

业务中经常会碰到发送验证码以后 按钮变成倒计时状态且不可发送验证码 倒计时变为0的时候 可已重新点击发送验证码

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
下面是具体验证码的代码
首先在data定义一下 变量
在这里插入图片描述
然后在点击按钮的事件里面加上 验证的代码就行了
在这里插入图片描述

范天缘
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jquery发送短信按钮倒计时
猿学
04-14 252
<div class="register-wrap"> <ul class="register-nav"> <li class="curr">注册</li> </ul> <div class="register-con"> <div class="register-li curr"> &...
点击发送按钮倒计时
TheShycc的博客
07-14 296
手机号：<input type="text" /> <button>发送</button> HTML代码 <script> var btn = document.querySelector('button'); //获取元素 var tim = 3; btn.addEventListener('click',function(){ //注册点击事件 btn.disabled = t...
发送验证码倒计时
u012138854的博客
02-20 110
downTime() { let time = setInterval(() => { this.time = this.time - 1; if (this.time == 0) { clearInterval(time); this.time_start = false; this.time = 60; } }, 1000); },
单击按钮发送验证码,出现倒计时的简单实例
08-31
单击按钮发送验证码，出现倒计时的简单实例 在网页开发中，验证码发送机制是一种非常常见的功能，通常情况下，我们需要在用户单击发送验证码按钮时，启用倒计时机制，以避免用户频繁地发送验证码请求。今天，我们...
js实现发送验证码后的倒计时功能
10-24
本文解决方案的基本思路是点击就将按钮设为disabled,然后根据cookie判断是否设置过期时间,将手机利用ajax提交到后台的发短信接口，就可以了
jquery实现手机发送验证码的倒计时代码
10-26
而为了防止用户频繁发送验证码，通常会引入倒计时机制，限制用户短时间内重复发送。本篇将详细介绍如何使用jQuery实现手机发送验证码的倒计时功能。 首先，我们需要一个JavaScript函数来处理倒计时逻辑。以下是一个...
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
11-22
这是倒计时的核心实现，它不断更新按钮上的显示文本，并在每秒结束后递减计数器。如果计数器小于等于0，恢复按钮的默认行为，允许用户再次发送验证码，并清除cookie。否则，禁用按钮，显示剩余秒数，并使用`...
点击发送短信验证码按钮后，倒计时60秒
刘旭利的博客
11-23 5088
在注册或登录某些网站的用户时，常常会遇到一些发送短信验证码的功能，点击发送按钮后会出现60秒倒计时。 代码实现如下： //60秒之后获取验证码 var wait=60; function time(obj) { if (wait == 0) { obj.removeAttribute("disabled"); obj.
QT做一个按钮Qpushbutton 倒计时功能的小小程序
07-13
QT做一个按钮Qpushbutton 倒计时功能的小小程序 https://jackzhang.blog.csdn.net/article/details/125747200 的源码。欢迎交流啊
qt实现倒计时示例
09-04
主要介绍了qt实现倒计时示例,需要的朋友可以参考下
js实现发送验证码倒计时按钮
weixin_30872157的博客
09-28 112
在写注册页面时，有时候需要发送注册邮件来获取验证码，但是为了防止多次重复发送邮件， 必须让按钮隔一段时间后才能再次使用。 代码如下： 1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>验证码按钮</title> 5 </head> ...
发送短信按钮倒计时
hw1287789687的专栏
10-12 183
1,定时器执行的函数 var SMSbtnTiming = function () { if (secondCount === 0) { $self.addClass('enabled').removeClass('disabled'); $self....
vue 前端 发送验证码按钮倒计时
Blue__Summer的博客
02-11 1047
<FormItem prop="verificationCode" class="verification_code"> <Input type="number" v-model="formFind.verificationCode" placeholder="请输入短信验证码" size="large" ...
发送验证码按钮倒计时
但行好事 莫问前程
10-26 300
&amp;lt;input type=&quot;text&quot; id=&quot;telephone&quot; value=&quot;&quot; name=&quot;telephone&quot; class=&quot;fn-tinput&quot; placeholder=&quot;手机号&quot; required data-rule-mobile=&quot;true&
jq 手机验证码
Ming-code
12-10 253
<input id="btnSendCode" type="button" value="发送验证码" οnclick="sendMessage()" /> var InterValObj; //timer变量，控制时间 var count = 5; //间隔函数，1秒执行 var curCount;//当前剩余秒数 function sendMessage() { 　curCo...
js发送短信验证码，点击按钮倒计时案例
爬楼梯的前端小白的博客
02-06 795
js发送短信验证码，点击按钮倒计时案例
点击按钮发送倒计时
yoyoosyy的博客
03-22 395
test count down button                 $(function () {             $('#btn').click(function () {                 var count = 3;                 var countdown = setInterval(CountDown, 1000);
winform实现发送邮箱验证码的倒计时按钮
最新发布
05-24
在 WinForm 中实现发送邮箱验证码的倒计时按钮可以通过以下步骤完成： 1. 在窗体中添加一个按钮和一个文本框，用于输入邮箱地址和显示倒计时信息。 2. 在按钮的 Click 事件中，先进行邮箱地址的验证，如果验证不通过，则弹出提示框。 3. 如果验证通过，则调用发送邮件的方法，并开启一个计时器，用于实现倒计时功能。 4. 在计时器的 Tick 事件中，更新倒计时信息，并在倒计时结束时停止计时器。 以下是示例代码： ```csharp private int countDown = 60; // 倒计时时间（秒） private Timer timer = new Timer(); private void btnSend_Click(object sender, EventArgs e) { string email = txtEmail.Text.Trim(); if (!Regex.IsMatch(email, @"^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$")) { MessageBox.Show("邮箱地址格式不正确！", "提示", MessageBoxButtons.OK, MessageBoxIcon.Warning); return; } // 调用发送邮件的方法 SendEmail(email); // 开启计时器 countDown = 60; timer.Interval = 1000; timer.Tick += new EventHandler(timer_Tick); timer.Start(); } private void timer_Tick(object sender, EventArgs e) { countDown--; if (countDown == 0) { timer.Stop(); btnSend.Enabled = true; btnSend.Text = "发送验证码"; } else { btnSend.Enabled = false; btnSend.Text = string.Format("{0}秒后重发", countDown); } } ``` 在上述代码中，SendEmail 方法需要根据具体情况进行实现，用于发送邮件验证码。在计时器的 Tick 事件中，根据倒计时时间更新按钮的文本和状态，并在倒计时结束时停止计时器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

范天缘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值