js实现发送验证码倒计时按钮

在写注册页面时,有时候需要发送注册邮件来获取验证码,但是为了防止多次重复发送邮件,

必须让按钮隔一段时间后才能再次使用。

代码如下:

 1 <html>
 2 <head>
 3 <meta charset="utf-8">
 4 <title>验证码按钮</title>
 5 </head>
 6 <body>
 7     <button type="button" id="send">发送验证码</button>
 8     <script type="text/javascript">
 9         wait = 60;
10         function wait_time(btn) {
11             if (wait == 0) {
12                 btn.removeAttribute("disabled");
13                 btn.innerText = "发送验证码";
14                 wait = 60;
15             } else {
16                 btn.setAttribute("disabled", true);
17                 btn.innerText = wait+"秒后重新发送";
18                 wait--;
19                 setTimeout(function(){wait_time(btn);},1000);
20             }
21         }
22     document.getElementById(‘send‘).onclick = function(){wait_time(this)};
23     </script>
24 </body>
25 </html> 
时间: 2024-10-14 02:21:54

js实现发送验证码倒计时按钮的相关文章

jQuery 发送验证码倒计时按钮 复制代码

<!DOCTYPE html> <html> <head> <title></title> <script src="../scripts/jquery.js" type="text/javascript"></script> <script> $(function () { var util = { wait: 90, hsTime: function (that) {

jQuery 发送验证码倒计时按钮

{ wait:90, hsTime:function(that){ if (this.wait == 0) { $('#hsbtn').removeAttr("disabled").val('重发短信验证码'); this.wait = 90; } else { var _this = this; $(that).attr("disabled", true).val('在'+_this.wait+'秒后点此重发'); _this.wait--; setTimeout

js 发送验证码倒计时

<input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function time(o) { if (wait == 0) { o.removeAttribute("disabled"); o.value="免费获取验证码"; wait = 30; }else{ o.setAttribute("disabled", true

jQuery实现的手机发送验证码倒计时效果代码分享

这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需要发送验证码到手机上的时候,我们经常碰到这样的效果:首先检测手机是否符合1开头,11位数字的格式:若不符合,则提示错误信息并返回false:否则提交给后台,后台确定接收后返回一个值,发送按钮变为灰色并倒计时. 运行效果: 年利率高达14.4% 上海投融理财,20万起投,年化收益14.4% 房产抵押,

react native中的聊天气泡以及timer封装成的发送验证码倒计时

今天看来情书写的文章,研究了一下大佬写的文章,自己做一点总结. 其实,今天我想把我近期遇到的坑都总结一下:1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以用navigationActions     2.父子组件的传值,一可以用callBack  二可以用pubsub发布订阅模式 三可以用manager事件监听(a页面要显示的内容 有两种形式,一是从manager主动接收,也就是说不需要点击什么的获取数据,而是时时监听manager里数据的变化,第二

iOS 短信验证码倒计时按钮的实现

验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器,每秒执行一次,定时改变Button的title,改变Button的样式,设置Button不可点击: 若倒计时结束,定时器关闭,并改变Button的样式,可以点击: 代码如下: 在按钮的点击事件里调用该方法      -(void)openCountdown{ __block NSInteger ti

安卓发送验证码倒计时效果和自动获取验证码并填充到输入框

在注册,实名认证.修改手机号码的,我们都会用发送验证码的功能,在这里经常就会涉及到2个效果, 第一个:发送验证码倒计时效果: 第二个:自动获取接收到的短信,并且填充验证码. 先来说倒计时效果: 其实很简单,就是一个计时器.每秒刷新一次,倒计时完了.就可以重新点击获取了. <pre name="code" class="java">btn_getYzm.setEnabled(false); btn_getYzm.setBackgroundResource(

发送验证码倒计时

//倒计时-(void)startTime{        //重新发送验证码    NSDictionary *dic = @{@"mobileNumber":self.phoneNumber};    [HttpTool1 post:GetRegVerificationCodeUrl params:dic success:^(id mydata) {        NSLog(@"成功----");        NSString *str = [[NSStri

jQuery手机发送验证码倒计时代码

<!DOCTYPE> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://s29.xtest.tech/res/bxdapp/js/jquery.min.js"></script> <script type="text/javascript"&