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

原创
2016/09/02 03:24
阅读数 343

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

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

<!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>
  
  <!--<script src="jquery.min.js"></script>-->
 <!-- <script src="jquery.cookie.js"></script>-->
 <!-- <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>-->
 </head>
 <body>
 <input id="memberTel" type="text" value="18518181818"/>
  <input id="code_btn" type="button"  value="免费获取验证码"  />
 </body>

 <script>

$(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>

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部