获取验证码倒计时优化 页面刷新实时倒计时

1.点击获取验证码按钮,改变按钮为不可点击状态,进行倒计时计时器,而且实时记录倒计时秒数,以及当前时间time1。javascript

2.页面刷新的时候监听倒计时按钮,获取倒计时秒数,以及页面关闭的时的时间time1,和当前时间time2。java

3.若是当前时间与关闭页面的时间的差  小于关闭页面的倒计时秒数,倒计时任然再进行,修改按钮为倒计时样式。jquery

//防止页面刷新倒计时失效
/**
 * 
 * @param {Object} obj  获取验证码按钮
 */
function monitor(obj) {
    var LocalDelay = getLocalDelay();
    var timeLine = parseInt((new Date().getTime() - LocalDelay.time) / 1000);
    if (timeLine > LocalDelay.delay) {
        console.log("过时");
    } else {
        _delay = LocalDelay.delay - timeLine;
        obj.text(_delay).addClass("btn-disabled");
        var timer = setInterval(function() {
            if (_delay > 1) {
                _delay--;
                obj.text(_delay);
                setLocalDelay(_delay);
            } else {
                clearInterval(timer);
                obj.text("获取验证码").removeClass("btn-disabled");
            }
        }, 1000);
    }
};
//倒计时效果
/**
 * 
 * @param {Object} obj 获取验证码按钮
 * @param {Function} callback  获取验证码接口函数
 */
function countDown(obj, callback) {
    if (obj.text() == "获取验证码") {
        var _delay = 60;
        var delay = _delay;
        obj.text(_delay).addClass("btn-disabled");
        var timer = setInterval(function() {
            if (delay > 1) {
                delay--;
                obj.text(delay);
                setLocalDelay(delay);
            } else {
                clearInterval(timer);
                obj.text("获取验证码").removeClass("btn-disabled");
            }
        }, 1000);

        callback();
    } else {
        return false;
    }
}

//设置setLocalDelay
function setLocalDelay(delay) {
    //location.href做为页面的惟一标识,可能一个项目中会有不少页面须要获取验证码。
    localStorage.setItem("delay_" + location.href, delay);
    localStorage.setItem("time_" + location.href, new Date().getTime());
}

//getLocalDelay()
function getLocalDelay() {
    var LocalDelay = {};
    LocalDelay.delay = localStorage.getItem("delay_" + location.href);
    LocalDelay.time = localStorage.getItem("time_" + location.href);
    return LocalDelay;
}
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
        <script type="text/javascript" src="js/getcode.js"></script>
        <script>
            $(function() {
                var btn = document.getElementById("btn-getcode");
                //调用监听
                monitor($(btn));
                //点击click
                btn.onclick = function() {
                    //倒计时效果  getCode回调函数  获取验证码api
                    countDown($(this), getCode);
                };

                function getCode() {
                    $.get("http://192.168.50.242:8080/demo/js/json.json", {}, function(res) {
                        if (res.code == 000) {
                            console.log("验证码将发送到你手机");
                        } else {
                            alert(res.message);
                        }
                    });
                }
            });
        </script>
相关文章
相关标签/搜索