专栏首页Alicejs获取手机验证码倒计时的实现

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 条评论
登录 后参与评论

相关文章

  • ios 创建sdk与demo同一个工程

    用户1219438
  • iOS afnetworking最新版报错 没有AFHTTPRequestOperationManager类了

    今天开了一个小项目   用的是pod   然后  安装好 Afnetworking之后   发现 AFHTTPRequestOperationManager  ...

    用户1219438
  • 上边半透明的效果并且显示的是上一页的内容

    项目介绍:首先上边显示的是透明的视图,透明度为0.8 这是一个vc 设置vc的view的背景颜色为clearcolor  上边是一个按钮,设置按钮的透明度为0....

    用户1219438
  • 生成guid 的办法记录

    用户3579639
  • scala转换date提取年月日时分秒

    从数据库提取出来的时间为 String 格式,现在需要转换为 date 并提取出里面的 小时 时间段:

    机器学习和大数据挖掘
  • Scala第一章学习笔记

      面向对象编程是一种自顶向下的程序设计方法。用面向对象方法构造软件时,我们将代码以名词(对象)做切割,每个对象有某种形式的表示服(self/this)、行为(...

    用户3003813
  • Kotlin开发的一些实用小技巧总结

    随着Google I/O大会的召开,Google宣布将支持Kotlin作为Android的开发语言,最近关于Kotlin的文章、介绍就异常的活跃。

    砸漏
  • C++ OpenCV特征提取之SIFT特征检测

    前面我们介绍了《C++ OpenCV特征提取之SURF特征检测》,这一篇我们在介绍一下SIFT的特征提取。

    Vaccae
  • Android--Button自定义水波纹颜色方法

    aruba
  • angularjs promise详解

    一、什么是Promise Promise是对象,代表了一个函数最终可能的返回值或抛出的异常,就是用来异步处理值的。 Promise是一个构造函数,自己身上有al...

    柴小智

扫码关注云+社区

领取腾讯云代金券