HTML 页面加载计时器 5秒倒计时后跳转页面

最新推荐文章于 2022-05-28 14:41:31 发布

沉闷萝卜

最新推荐文章于 2022-05-28 14:41:31 发布

阅读量2.1k

点赞数 1

分类专栏：前端文章标签： html javascript

原文链接：https://blog.csdn.net/qq_43021813/article/details/82820965

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML 页面加载计时器 5秒倒计时后跳转页面

转载链接：https://blog.csdn.net/qq_43021813/article/details/82820965

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>正在跳转...</title>
    <script>
        function countDown() {
            //获取初始时间
            var time = document.getElementById("Time");

            //获取到id为time标签中的数字时间
            if (time.innerHTML == 0) {
                //等于0时清除计时，并跳转该指定页面
                window.location.href="https://www.baidu.com";
            } else {
                time.innerHTML = time.innerHTML - 1;
            }
        }

        //1000毫秒调用一次
        window.setInterval("countDown()", 1000);
    </script>
    <style>
        #main {
            position: absolute;
            width: 420px;
            height: 200px;
            left: 50%;
            top: 50%;
            margin-left: -210px;
            margin-top: -100px;
        }

        #Time {
            font-size: 25px;
            text-align: center;
            color: red;
        }

        .boxs {
            font-size: 25px;
            text-align: center;
            margin: 0 auto;
        }

        #Font {
            font-size: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="main">
    <div>
        <span class="boxs">	注册成功！</span>
    </div>
    <div>
        <span class="boxs">
            本页面将在<span id="Time">5</span>秒之后跳转到登录页面！
        </span>
    </div>
    <div>
        <span style="" id="Font">
            如未成功跳转，请<a href="javascript: window.location.href='https://www.baidu.com'">点击这里</a>
        </span>
    </div>
</div>
</body>
</html>