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

最新推荐文章于 2023-02-06 08:00:00 发布

star-1331

最新推荐文章于 2023-02-06 08:00:00 发布

阅读量1.7k

点赞数

分类专栏：页面效果文章标签：倒计时刷新和关闭 ios特殊处理

本文链接：https://blog.csdn.net/weixin_40970987/article/details/86476776

版权

页面效果专栏收录该内容

18 篇文章 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>

star-1331

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
倒计时（刷新和页面关闭不受影响）

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;倒计时&lt;/title&gt; &lt;script src="http://static.wanlianjin.com/
复制链接

扫一扫

专栏目录