JavaScript(五)_BOM_地址栏(Location)对象_自动跳转页面案例

最新推荐文章于 2022-08-02 09:09:42 发布

原创最新推荐文章于 2022-08-02 09:09:42 发布 · 351 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现页面自动跳转的方法。通过设置定时器和修改span标签的内容来显示倒计时，当倒计时结束时，页面将自动跳转到指定的URL。此方法适用于网页开发中需要进行页面跳转的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转页面</title>
    <style>
        p{
            text-align: center;
        }
        span{

            color: red;
        }
    </style>
</head>
<body>
    <p>
        <span id="time">5</span>秒之后，自动跳转到页面...
    </p>
    <script>
        /*

                分析：
                    1.显示页面的效果  <p> 标签完成
                    2.倒计时读秒效果实现
                        *定时器实现
                            2.1定义一个方法，获取span标签，修改span标签体内容，时间--
                            2.2定义一个定时器，1秒执行一次该方法

         */
        //2.倒计时读秒效果实现
        var second=5;
        var time=document.getElementById("time");
        function fun() {
            second--;
            if (second==0){
                location.href="https://www.baidu.com";
            }
            time.innerHTML= second+"";


        }
        //设置定时器
        setInterval(fun,1000);
    </script>
</body>
</html>