BOM_Location和案例3_自动跳转首页

Location:地址栏对象

　　创建（获取）

　　　　window.location

　　　　location

　　方法：

　　　　reload（）重新加载当前文档。刷新

　属性：

　　　　href 设置或返回完整的URL

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" id="btn" value="刷新">

    <input type="button" id="goItcast" value="去传智">


    <script>

        var btn = document.getElementById("btn");
        btn.onclick = function () {
            location.reload();
        }
        var href = location.href;
        // alert(href);

        var goItcast = document.getElementById("goItcast");
        goItcast.onclick = function () {
            location.href = "http://www.baidu.com";
        }
    </script>
</body>
</html>

案例3_自动跳转首页

分析：

　　显示页面效果

　　倒计时读秒效果实现

　　　　2.1：定义一个方法，获取span标签，修改span标签体内容，时间

　　　　2.2：定义一个定时器，1秒执行一次该方法

　　在方法中判断时间如果<= 0，则跳转到首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        <span id="time">5</span>秒之后，自动跳转页面
    </p>
    <script>
        var second = 5;
        var time = document.getElementById("time");
        function showTime() {
            second -- ;
            if (second<=0){
                location.href = "https://www.baidu.com";
            }
            time.innerHTML = second + "";
        }
        setInterval(showTime,1000)
    </script>
</body>
</html>

posted on 2022-08-04 09:34 淤泥不染阅读(38) 评论(0) 收藏举报