JQuery---点击获取验证码后倒计时,刷新页面倒计时不失效

     采用通过添加Cookie的方式实现页面刷新后倒计时仍有效,亲测有效!
1.Html部分:

//导入JS文件
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<div class="cj-text"><label>手机号码<b>*&nbsp;</b></label><input name="" type="text" id="mobile"></div>
<div class="cj-text reg-dx"><label>短信验证码<b>*&nbsp;</b></label><input class="reg-dx-t" name="" type="text" id="mobileYzm">
    <input type="button" class="reg-dx-hq" id="btnYZM" onclick="getYZM()" value="点击获取验证码" />
</div>

2.JS代码部分:

 //发送验证码时添加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));
        }
    }
    //修改cookie的值
    function editCookie(name,value,expiresHours){
        if(expiresHours>0){
            var date=new Date();
            date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒
            $.cookie(name, escape(value), {expires: date});
        } else{
            $.cookie(name, escape(value));
        }
    }
    //根据名字获取cookie的值
    function getCookieValue(name){
        return $.cookie(name);
    }
    //加载页面时获取Cookie并判断
$(document).ready(function(){
    var obj1 = $("#btnYZM");
    v = getCookieValue("secondsremained");//获取cookie值
    if(v>0){
        settime(obj1);//开始倒计时
    }
});
//定义倒计时变量
var countdown;
//点击函数
function getYZM() {
    var mobile = $("#mobile").val();
    var obj = $("#btnYZM");
      if (mobile) {
        addCookie("secondsremained", 60, 60);//添加cookie记录,有效时间60s
        settime(obj);//开始倒计时
            }
}
// 倒计时函数
function settime(obj) { //发送验证码倒计时
    countdown=getCookieValue("secondsremained");
    if (countdown === "0") {
        obj.attr('disabled',false);
        //obj.removeattr("disabled");
        obj.val("点击获取验证码");
        return;
    } else {
        obj.attr('disabled',true);
        obj.val("重新发送(" + countdown + ")");
        countdown--;
        editCookie("secondsremained",countdown,countdown+2);
    }
    setTimeout(function() {
            settime(obj) }
        ,1000)
}

猜你喜欢

转载自blog.csdn.net/hjy1821/article/details/86501984