倒计时，离开页面时停止，进入时恢复

倒计时，页面隐藏时停止倒计时，重新进入时恢复

html

<h2>剩余时间:</h2>
<h2 id="has-time"></h2>

js

// 倒计时
        let timer = null,
            t = 0,
            time = 0,
            timeout=false,
            getDate = new Date();
        function getCountDown(timestamp) {
            timer = setInterval(function () {
                var nowTime = new Date();
                var endTime = new Date(timestamp);

                t = endTime.getTime() - nowTime.getTime();
                var hour = Math.floor((t / 1000 / 60 / 60) % 24);
                var min = Math.floor((t / 1000 / 60) % 60);
                var sec = Math.floor((t / 1000) % 60);
                if (hour == 0 && min == 0 && sec == 0) {
                    // timeout = true;
                    // $(".submit-btn").click();
                    clearInterval(timer);
                }
                if (hour < 10) {
                    hour = "0" + hour;
                }
                if (min < 10) {
                    min = "0" + min;
                }
                if (sec < 10) {
                    sec = "0" + sec;
                }
                var countDownTime = hour + ":" + min + ":" + sec;
                $("#has-time").html(countDownTime);
            }, 1000);
        }

        //调用函数：
        getCountDown(new Date().getTime() + 1000 * 60 * 45);

　　　　//监听是否离开页面

        document.addEventListener(
            "visibilitychange",
            function () {
                if (document.visibilityState == "hidden") {
                    clearInterval(timer);
                } else {
                    if (timeout) {
                        clearInterval(timer);
                    } else {
                        getCountDown(new Date().getTime() + t);
                    }
                }
            },
            false
        );

源代码：https://github.com/ouxiaojie18/-/blob/master/%E5%80%92%E8%AE%A1%E6%97%B6.html

转载于:https://www.cnblogs.com/mosquito18/p/9719737.html