js获取手机验证码倒计时的实现

原文地址http://blog.csdn.net/hj7jay/article/details/51433828

方案1:

<div class="div user-input">  
  <input type="number" class="code" name="verify" placeholder="请输入手机验证码" required maxlength="6">  
  <input type="button" class="obtain generate_code" value=" 获取验证码">  
</div>  
<script type="text/javascript">  
  $(function(){  
    $(".generate_code").click(function(){  
      var disabled = $(".generate_code").attr("disabled");  
      if(disabled){  
        return false;  
      }  
      if($("#mobile").val() == "" || isNaN($("#mobile").val()) || $("#mobile").val().length != 11 ){  
        alert("请填写正确的手机号!");  
        return false;  
      }  
      $.ajax({  
        async:false,  
        type: "GET",  
        url: "{:U('User/sms')}",  
        data: {mobile:$("#mobile").val()},  
        dataType: "json",  
        async:false,  
        success:function(data){  
          console.log(data);  
          settime();  
        },  
        error:function(err){  
          console.log(err);  
        }  
      });  
    });  
    var countdown=60;  
    var _generate_code = $(".generate_code");  
    function settime() {  
      if (countdown == 0) {  
        _generate_code.attr("disabled",false);  
        _generate_code.val("获取验证码");  
        countdown = 60;  
        return false;  
      } else {  
        $(".generate_code").attr("disabled", true);  
        _generate_code.val("重新发送(" + countdown + ")");  
        countdown--;  
      }  
      setTimeout(function() {  
        settime();  
      },1000);  
    }  
  })  
  
</script>

方案2:

<div class="div user-input">  
  <input type="number" class="code" placeholder="请输入手机验证码" required maxlength="6">  
  <input type="button" class="obtain generate_code" value=" 获取验证码" onclick="settime(this);">  
</div>  
<script type="text/javascript">  
  
//倒计时  
var countdown=60;  
function settime(val) {  
    if (countdown == 0) {  
        val.removeAttribute("disabled");  
        val.value="获取验证码";  
        countdown = 60;  
        return false;  
    } else {  
        val.setAttribute("disabled", true);  
        val.value="重新发送(" + countdown + ")";  
        countdown--;  
    }  
    setTimeout(function() {  
        settime(val);  
    },1000);  
}  
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏高性能服务器开发

+从零实现一款12306刷票软件1.3

12306的图片验证码一般由八个图片组成,像上面的“龙舟”文字,也是图片,这两处的图片(文字图片和验证码)都是在服务器上拼装后,发给客户端的,12306服务器上...

1261
来自专栏谈补锅

关于Certificate、Provisioning Profile、App ID的介绍及其之间的关系

刚接触iOS开发的人难免会对苹果的各种证书、配置文件等不甚了解,可能你按照网上的教程一步一步的成功申请了真机调试,但是还是对其中的缘由一知半解。这篇文章就对Ce...

1673
来自专栏娱乐心理测试

小程序验证码倒计时

4605
来自专栏bboysoul

安装最新版本的youtube-dl

大家都知道可以使用youtube-dl来下载youtube的视频,但是今天这个软件给我报了一个错误

1652
来自专栏技术博文

强烈推荐(原创亲测)!!!Fiddler抓取https设置详解(图文)

本文主要说明了自己在设置fiddler抓取https过程中所遇到的问题及解决步骤,特别是fiddler在设置证书的环节遇到的各种奇葩问题,特此分享! 声明:本文...

2K5
来自专栏娱乐心理测试

小程序如何避免多次点击,重复触发事件

作为前端开发,我们经常会遇到的场景,比如用户点击获取验证码按钮时,没有反应,大部分用户都会接着点击,这就会造成用户收到多条验证码,这是因为后台api请求比较慢,...

1.3K5
来自专栏DannyHoo的专栏

清理Xcode

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1263
来自专栏C# 编程

C#“简单加密文本器”的实现

本示例只能加密英文文本,使用的算法为异或算法。 源代码:http://pan.baidu.com/share/link?shareid=3241348313&u...

3110
来自专栏小李刀刀的专栏

利用宏避免发送确认邮件时忘记添加附件

团队的邮件周知流程在不断规范,对邮件格式当然也做出了很多要求。在刚开始的阶段,大家都还不是很熟练,于是频频出现聚精会神地把邮件内容处理完以后,还没有把制作完成的...

4209
来自专栏谈补锅

<转>关于Certificate、Provisioning Profile、App ID的介绍及其之间的关系

刚接触iOS开发的人难免会对苹果的各种证书、配置文件等不甚了解,可能你按照网上的教程一步一步的成功申请了真机调试,但是还是对其中的缘由一知半解。这篇文章就对Ce...

1182

扫码关注云+社区