JS实现页面倒计时自动关闭

JS实现页面倒计时自动关闭

没啥好说的直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>支付成功</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .timeOut {
            margin-top: 150px;
            text-align: center;
            font-size: 13px;
        }
        #timeOutClose {
            margin: 0 2px 0 2px;
            color: red;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="timeOut">
        <span>
            本窗口将在<span id="timeOutClose"></span>秒后自动关闭!
        </span>
    </div>
    <script>
        var timeOut = document.getElementById("timeOutClose");
        var i = 5;
        var timeout = function () {
            timeOut.innerText = i;
            //innerHtml和innerText的区别也可以了解一下
            if (i >= 0){
                setTimeout("timeout();", 1000);//设置定时器
                //好奇为什么不用setIterval()的可以搜一下他们俩的区别
            }
            else {
                window.close();//关闭页面方法
            }
            i--;
        }
        timeout();
    </script>
</body>
</html>

效果图

JS实现页面倒计时自动关闭_第1张图片

结尾

这也是我在网上搜了很多才最终实现我需求的方法,大家有什么更好的方法或者遇到了什么问题可以在评论区讨论一下呀

你可能感兴趣的:(web,javascript,html)