BOM_Window属性和location对象

Window属性

属性

1.获取其他BOM对象：

  • history：历史记录对象
  • location：地址栏对象
  • Navigator：浏览器对象
  • Screen：显示器屏幕对象

2.获取DOM对象

  • document

 HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>BOM打开关闭属性</title>
        
    </head>
    <body>
        <input id="openBtn" type="button" value="打开窗口">
        <input id="closeBtn" type="button" value="关闭窗口">
        <script>
            //获取history
            var h1=window.history;
            var h2=history;
        
            alert(h1);
            alert(h2);
            
            var openBtn=window.document.getElementById("openBtn");
            alert(openBtn);
            
        </script>
    </body>
</html>
复制代码

运行结果

 

 

 location对象

1.创建（获取）：

  • window.location
  • location

2.方法：

  • reload():重新加载当前文档 刷新

3.属性

  • href:设置或返回完整的URL

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>location对象</title>
    </head>
    <body>
        <input type="button" id="btn" value="刷新">
        
        <input type="button" id="goItcast" value="去百度">
        <script>
            //reload方法 定义一个按钮 点击按钮 刷新当前页面
            //1.获取按钮
            var btn = document.getElementById("btn");
            //2.绑定单击时间
            btn.onclick = function(){
                //3.刷新页面
                location.reload();
            }
            
            //获取href
            var href = location.href;
            //alert(href)
            //点击按钮 去访问www.baidu.com官网
            //1.获取按钮
            var goItcast = document.getElementById("goItcast");
            //2.绑定单击时间
            goItcast.onclick = function(){
                //3.刷新页面
                location.href="https:www.baidu.com";
            }
            
            
        </script>
        
        
    </body>
</html>
复制代码

运行结果

 

 

 案例_自动跳转首页

分析

1.显示页面效果<p>

2.倒计时读秒效果实现

  • 定义一个方法 获取span标签 修改span标签体内容 时间--
  • 定义一个定时器 1秒执行一次该方法

3.在方法判断时间如果<=0 则跳转到该页面

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自动跳转</title>
        <style>
            p{
                text-align:center;
            }
            span{
                color:red;
            }
            
        </style>
        
        <script>
            var second=5;
            //定义一个方法 获取span标签 修改span标签体内容
            function showTime(){
                second--;
                //判断时间如果时间为0则跳转到百度
                if(second <=0){
                    location.href="https://www.baidu.com";
                }
                var time = document.getElementById("time");
                time.innerHTML = second+"";
            }
            //设置定义器 1秒执行一次该方法
            setInterval(showTime,1000);
            
        </script>
    </head>
    <body>
        <p>
            <span id="time">5</span>秒之后,自动跳转到首页
        </p>
    </body>
</html>
复制代码

运行结果

posted @   baimingze  阅读(16)  评论(0)  编辑  收藏  举报
相关博文：
· BOM_概述和Window窗口对象
· Window窗口对象和定时器方法
· BOM_Location与案例3_自动跳转首页
· BOM_Window_属性和BOM_Location
· BOM_window属性和Location
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示