倒计时（刷新和页面关闭不受影响）

Dear 丶 2022-04-22 15:54 229阅读 0赞

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>倒计时</title>
        <script
        src="http://static.wanlianjin.com/data/m/wlcs/js/car/jquery-1.7.2.min.js"
        type="text/javascript" charset="utf-8"></script>
        <style>
            .getCode{
                width: 80px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                background-color: #fff;
                font-size: 22px;
                color: #ff9600;
                position: absolute;
                right: 25px;
                margin-top: 18px;
                border-radius: 0px;
                border-bottom: 1px solid #ff9600;
            }
        </style>
    </head>
    <body>
        <div class="getCode" onclick="getCode(this)">获取验证码</div>
        <script>
            if(parent.isIOS()){
              window.addEventListener("pagehide", myUnloadHandler, false);
              window.addEventListener("pageshow", myLoadHandler, false);
                function myLoadHandler(evt){
                   var oldTime = Date.parse(new Date());
                   var oldSeconds = parseInt($('.getCode').html());
                   localStorage.setItem('oldTime',oldTime);
                   localStorage.setItem('oldSeconds',oldSeconds);
                } 
    
                function myUnloadHandler(evt){
                    var oldTime = Date.parse(new Date());
                    var oldSeconds = parseInt($('.getCode').html());
                    localStorage.setItem('oldTime',oldTime);
                    localStorage.setItem('oldSeconds',oldSeconds);
                }
            }
            //页面加载之前，先去获取当前时间和秒数保存
            window.onbeforeunload = function(){
                var oldTime = Date.parse(new Date());
                var oldSeconds = parseInt($('.getCode').html());
                localStorage.setItem('oldTime',oldTime);
                localStorage.setItem('oldSeconds',oldSeconds);
            }
            //ios手机判断
            function isIOS() {
                var userAgentInfo = navigator.userAgent;
                var Agents = [ "iPhone","iPad","iPod","iOS"];
                var flag = false;
                for (var v = 0; v < Agents.length; v++) {
                    if (userAgentInfo.indexOf(Agents[v]) > 0) {
                        flag = true;
                        break;
                    }
                }
                return flag;
            }
            //刷新或页面关闭之后重新去获取时间得出当前剩下的秒数
            window.function(){
                var newTime = Date.parse(new Date());
                var oldTime1 = localStorage.getItem('oldTime');
                var oldSeconds1 = localStorage.getItem('oldSeconds');
                var chaSeconds = (newTime - oldTime1) / 1000;
                if(chaSeconds < oldSeconds1){
                    var second = oldSeconds1 - chaSeconds;
                    $('.getCode').html(second + ' 秒');
                    clock = setInterval(function () {
                        second--;
                        if (second > 0) {
                           $('.getCode').html(second + ' 秒');
                        } else {
                            clearInterval(clock);
                            $('.getCode').html('获取验证码');
                            $('.getCode').attr("disabled", false);
                            $('.getCode').css("background-color","#fff");
                            second = 60;
                            isGettingCode = false;
                        }
                    }, 1000);
                }
            }
            function getCode(btn) {
                var second = 60;
                btn.innerHTML = second + ' 秒';
                clock = setInterval(function () {
                    second--;
                    if (second > 0) {
                        btn.innerHTML = second + ' 秒';
                    } else {
                        clearInterval(clock);
                        btn.innerHTML = '获取验证码';
                        $(btn).attr("disabled", false);
                        $(btn).css("background-color","#fff");
                        second = 60;
                        isGettingCode = false;
                    }
                }, 1000);
            }
        </script>
    </body>
    </html>