JQuery---點擊獲取驗證碼後倒計時,刷新頁面倒計時不失效

親測有效!

1.html代碼

<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">
   <button class="layui-btn" type="button" id="send" οnclick="getCode()" lay-submit lay-filter="formDemo">發送驗證碼</button>
</div>

2.js代碼

<script>
    //發送驗證碼時添加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 = $("#send");
        v = getCookieValue("secondsremained");//獲取cookie值
        if(v>0){
            settime(obj1);//開始倒計時
        }
    });
    //定義倒計時變量
    var countdown;
    //點擊函數
    function getCode() {
        var phone = $("#phone").val();
        var obj = $("#send");
        var checkPhone = /^1[34578]\d{9}$/;
        if(!checkPhone.test(phone)){
            layer.msg('手機號碼格式錯誤!');
            $('#phone').focus();
            return false;
        }
        if (phone) {
            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.text("點擊獲取驗證碼");
            return;
        } else {
            obj.attr('disabled',true);
            obj.text("重新發送(" + countdown + ")");
            countdown--;
            editCookie("secondsremained",countdown,countdown+2);
        }
        setTimeout(function() {
                settime(obj) }
            ,1000)
    }
</script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章