js倒计时刷新页面不受影响

左手的ㄟ右手 2022-11-20 09:34 237阅读 0赞

转自：[https://blog.csdn.net/gqzydh/article/details/102797669][https_blog.csdn.net_gqzydh_article_details_102797669]

JS倒计时（无视页面刷新）使用localStorage

<html>
    <head>
    <title>JS倒计时（无视页面刷新）使用localStorage</title>
     
    <style>
    .disabled {
        background: #fff;
        color: #ccc;
        border: solid 0px;
    }
    .disabled:hover {
         background:none;
          color: #ccc;
    }
    </style>
    </head>
    <body>
     
    <input type="tel" placeholder="请输入手机号" name="Phone">
    <a class="fasong" id="btnSend" style="cursor:pointer;">发送验证码</a>
    </body>
     
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script language="javascript">
     
    $(function () {
      //点击发送验证码
        $('body').on('click', '#btnSend', function () {
              $('body').off('click', '#btnSend');
              LockButton('#btnSend', 60);
          })
           
        //读取localStorage
        var djsendtime = localStorage.getItem("djsendtime");
        if (djsendtime != undefined && !isNaN(djsendtime)) {  
            var now = new Date().getTime();  //当前时间戳
            var locksecends = parseInt((djsendtime - now) / 1000);
            if (locksecends <= 0) {
                localStorage.removeItem("djsendtime", null);
            } else {
                LockButton('#btnSend', locksecends);
            }
        }
      
    })
     
    // 按钮倒计时
    var LockButton = function (btnObjId, locksecends) {
        //1.获取当前系统时间
        //2.获取 locksecends 后的系统时间
        //3.用 localStorage 保存到期时间
        //4.每次加载后获取 localStorage中保存的时间
        //5.用到期时间减去当前时间获取倒计时
        var djsendtime = localStorage.getItem("djsendtime")
        if (djsendtime == null || djsendtime == undefined || djsendtime == 'undefined' || djsendtime == 'null') {
            var now = new Date().getTime();  //当前时间戳
            var endtime = locksecends * 1000 + now;  //结束时间戳
            localStorage.setItem("djsendtime", endtime); //将结束时间保存到cookie
        }
        $(btnObjId).addClass('disabled').attr('disabled', 'disabled').text('(' + locksecends + ')秒后重新获取');
        $('body').off('click', '#btnSendSMS');
        var timer = setInterval(function () {
            locksecends--;
            $(btnObjId).text('(' + locksecends + ')秒后重新获取');
            if (locksecends <= 0) {
                //倒计时结束清除 localStorage值
                localStorage.removeItem("djsendtime", null);
                $(btnObjId).removeClass('disabled').removeAttr('disabled').text('重新获取');
                $('body').on('click', btnObjId);
                clearInterval(timer);
            }
        }, 1000);
    };
    </script>
     
    </html>

[https_blog.csdn.net_gqzydh_article_details_102797669]: https://blog.csdn.net/gqzydh/article/details/102797669