前端常用库-发送短信验证码倒计时60秒

前端常用库-发送短信验证码倒计时60秒

        </h1>
        <div class="clear"></div>
        <div class="postBody">
  1. 带ajax验证
    原文链接:http://www.cnblogs.com/steed-zgf/archive/2012/02/03/2336984.html
    复制代码
    <!doctype html>
    <head>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    

    var InterValObj; //timer变量,控制时间
    var count = 60; //间隔函数,1秒执行
    var curCount;//当前剩余秒数

    function sendMessage() {
     curCount
    = count;
      
    //设置button效果,开始计时
    $("#btnSendCode").attr("disabled", "true");
    $(
    "#btnSendCode").val("请在" + curCount + "秒内输入验证码");
    InterValObj
    = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
       //向后台发送处理数据
    $.ajax({
      type:
    "POST", //用POST方式传输
      dataType: "text", //数据格式:JSON
      url: 'Login.ashx', //目标地址
       data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,
       error:
    function (XMLHttpRequest, textStatus, errorThrown) { },
      success:
    function (msg){ }
    });
    }

    //timer处理函数
    function SetRemainTime() {
    if (curCount == 0) {
    window.clearInterval(InterValObj);
    //停止计时器
    $("#btnSendCode").removeAttr("disabled");//启用按钮
    $("#btnSendCode").val("重新发送验证码");
    }
    else {
    curCount
    --;
    $(
    "#btnSendCode").val("请在" + curCount + "秒内输入验证码");
    }
    }
    </script>
    </head>
    <body>
    <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></p>
    </body>
    </html>

    复制代码



  2. 不带ajax
    复制代码
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript"> 
    var countdown=60; 
    function settime(obj) { 
        if (countdown == 0) { 
            obj.removeAttribute("disabled");    
            obj.value="免费获取验证码"; 
            countdown = 60; 
            return;
        } else { 
            obj.setAttribute("disabled", true); 
            obj.value="重新发送(" + countdown + ")"; 
            countdown--; 
        } 
    setTimeout(function() { 
        settime(obj) }
        ,1000) 
    }
    

    </script>
    <body>
    <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />

    </body>
    </html>

    复制代码
这是我自己学习,工作做的笔记和总结,只是做个记录,没事的时候翻翻!有问题大家可以提出来,一起探讨,共同进步。如有转载,请注明出处。

原文地址:https://www.cnblogs.com/whkzm/p/12219407.html