JavaScript网页制作--五秒后自动跳转页面

红太狼 2022-12-27 01:16 4668阅读 0赞

# JavaScript网页制作–五秒后自动跳转页面 #

通常在浏览一些网站时，会出现网页不存在的情况，网页不存在之后，有些网站会在5秒后自动跳转到一个新的网页，比如网站的首页。可以利用定时器和location属性写自动跳转的页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>五秒之后自动跳转</title>
        <style>
            div{
         
                font-size: 16px;
                background-color: coral;
                height: 50px;
                width: 300px;
                text-align: center;
                line-height: 50px;
                margin: auto ;
                margin-top: 250px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <script>
            var div = document.querySelector('div');
            var t = 5;
            fn();
            setInterval(fn, 1000);
            function fn() {
         
                if (t === 0){
         
                location.href = 'https://blog.csdn.net/weixin_42579348';
            }    
                div.innerHTML = '页面不存在，您将在'+t+'秒后跳转至新页面';
                t--;
            }        
        </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/d506d3c7016f49349a7ba326c05fa0d9.png