获取验证码倒计时

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="getcode" value="获取验证码">获取验证码</button>
    <script type="text/javascript">
        $(function() {
            var btn = document.getElementById("getcode");
            //调用监听
            monitor($(btn));
            //点击click
            btn.onclick = function() {
                //倒计时效果  getCode回调函数  获取验证码api
                countDown($(this), getCode);
            };
            function getCode() {
                alert("验证码发送成功");
                //调用验证码接口函数
            }
        });
   </script>
</body>
</html>

js部分

function monitor(obj) {
    var LocalDelay = getLocalDelay();
    if(LocalDelay.time!=null){
        var timeLine = parseInt((new Date().getTime() - LocalDelay.time) / 1000);
        if (timeLine > LocalDelay.delay) {
            console.log("过期");
        } else {
            _delay = LocalDelay.delay - timeLine;
            obj.text(_delay+"秒后重新发送");
            document.getElementById("getcode").disabled = true;
            var timer = setInterval(function() {
                if (_delay > 1) {
                    _delay--;
                    obj.text(_delay+"秒后重新发送");
                    setLocalDelay(_delay);
                } else {
                    clearInterval(timer);
                    obj.text("获取验证码");
                    document.getElementById("getcode").disabled = false;
                }
            }, 1000);
        }
    }
};


//倒计时效果
/**
 *
 * @param {Object} obj 获取验证码按钮
 * @param {Function} callback  获取验证码接口函数
 */

function countDown(obj, callback) {

    if (obj.text() == "获取验证码") {
        var _delay = 60;
        var delay = _delay;
        obj.text(_delay+"秒后重新发送");
        document.getElementById("getcode").disabled = true;
        var timer = setInterval(function() {
            if (delay > 1) {
                delay--;
                obj.html(delay+"秒后重新发送");
                setLocalDelay(delay);
            } else {
                clearInterval(timer);
                obj.text("获取验证码");
                document.getElementById("getcode").disabled = false;
            }
        }, 1000);

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


       //设置setLocalDelay
       function setLocalDelay(delay) {
           //location.href作为页面的唯一标识，可能一个项目中会有很多页面需要获取验证码。
           sessionStorage.setItem("delay_" + location.href, delay);
           sessionStorage.setItem("time_" + location.href, new Date().getTime());
       }

       //getLocalDelay()
       function getLocalDelay() {
           var LocalDelay = {};
           LocalDelay.delay = sessionStorage.getItem("delay_" + location.href);
           LocalDelay.time = sessionStorage.getItem("time_" + location.href);
           return LocalDelay;
       }

原文出自：https://www.cnblogs.com/shueixue/p/5776965.html

 

posted @ 2018-04-12 15:00  JeneryYang  阅读(530)  评论(0)  编辑  收藏  举报