jquery 发送短信验证码倒计时功能(页面关闭也照常进行倒计时)

时间 2019-12-06

标签 jquery 发送短信验证码倒计时功能页面关闭照常进行栏目 JQuery 繁體版

原文原文链接

今天测试提了一个bug，发送短信倒计时功能，要求关闭页面也要进行倒计时。这想到了，当年我参与的周杰伦演唱会的先付先抢功能。与之相似，只不过，那个项目的时间都是服务器时间，本人目前有点偷懒，就用客户端的时间了。css

一下是完整的代码，只不过在客户端的效率不是很好。html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
  <script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

  


</head>
<body>
<input id="memberTel" type="text" value="18518181818"/>
  <input id="code_btn" type="button" value="免费获取验证码" />
</body>jquery

<script>ajax

$(function(){
    checkCountdown();
    $("#code_btn").click(function (){
        if(count_down > 0){
            return;
        }
        sendCode($("#code_btn"));
    });

})
//校验打开页面的时候是否要继续倒计时
function checkCountdown(){
    var secondsremained =     $.cookie("secondsremained");
    if(secondsremained){
        var date = new Date(unescape(secondsremained));
        setCoutDown(date,$("#code_btn"));
    }
}
//发送验证码
function sendCode(obj){
    var result = isPhoneNum();
    if(result){
        //加载ajax 获取验证码的方法
        getCaptcha();
        var date = new Date();
        addCookie("secondsremained",date.toGMTString(),60);//添加cookie记录,有效时间60s
        setCoutDown(date,obj);
    }
}



var nowDate = null;
var time_difference = 0;
var count_down = 0;
function setCoutDown(date,obj) {
    nowDate = new Date();
    time_difference = ((nowDate- date)/1000).toFixed(0);
    count_down = 60 - time_difference;
    console.log(count_down);

    if(count_down<=0){
        obj.removeAttr("disabled");
        obj.removeClass("code_grey");
        obj.html("获取验证码");
        obj.val("获取验证码");
        addCookie("secondsremained","",60);//添加cookie记录,有效时间60s
        return;
    }
    obj.attr("disabled", true);
    obj.addClass("code_grey");
    obj.html(count_down + "秒后重发");
    obj.val(count_down + "秒后重发");
    setTimeout(function() { setCoutDown(date,obj) },1000) //每1000毫秒执行一次
}


//发送验证码时添加cookie
function addCookie(name,value,expiresHours){
    //判断是否设置过时时间,0表明关闭浏览器时失效
    if(expiresHours>0){
        var date=new Date();
        date.setTime(date.getTime()+expiresHours*1000);
        $.cookie(name, escape(value), {expires: date});
    }else{
        $.cookie(name, escape(value));

    }
}


//校验手机号是否合法
function isPhoneNum(){
    var mobile = $("#memberTel").val();
    if($.trim(mobile) =="" || !(/^1[3|4|5|7|8]\d{9}$/.test(mobile))){
        tooltip().show('提示','请输入正确手机号码');
        return false;
    }
    return true;
}

function getCaptcha(){

    $.ajax({
        type: 'GET',
        url: basePath + '/getcaptcha',
        data: {
            "mobile":mobile
        },
        async: false,
        dataType: "json",
    });
}

</script>
</html>json

jquery 发送短信验证码 倒计时功能(页面关闭也照常进行倒计时)

jquery 发送短信验证码倒计时功能(页面关闭也照常进行倒计时)