BOM

1.概念:Browser Object Model 浏览器对象模型

2.组成:

  *window:窗口对象

  *Navigator:浏览器对象

  *Screen:显示器屏幕对象

  *History:历史记录对象

  *Location:地址栏对象

3.window:窗口对象

/*

    window:
      1.创建
      2.方法
          1.与弹出框有关的方法:
            *alert():警告框
            *confirm():确认取消对话框
                如果用户点击确定按钮,返回true
                如果用户点击取消按钮,返回false
            *prompt():提示用户输入的输入框
                返回值,获取用户输入的值
           2.与开关有关的方法:
             *open():打开新窗口
             *close():关闭窗口(谁调用我关闭谁)
                  返回一个新的window对象
           3.与定时器有关的方法:
              *setTimeout():只会执行一次
                    *参数:1.js对象或者方法对象
                          2.毫秒值
              *clearTimeout():取消setTimeout设置的定时器
              *setInterval():循环执行
              *clearInterval()取消setInterval设置的定时器



      3.属性:
            1.获取其他bom对象
                1.history
                2.location
                3.Navigator
                4.Screen
            2.获取dom对象
      4.特点
          *window对象不需要创建可以直接使用
          *window引用可以省略。



*/
confirm("您确定要退出吗");
一次性的定时器:
    function fun(){
        alert("boom")
    }
//setTimeout("fun()",3000);
setInterval("fun()",2000)
获取history
var h =window.history;
alert(h);

4.Location:地址栏对象

1.创建:
2.方法
reload():重新加载页面
3.属性
  href:设置完整的url路径

5.案例:五秒之后跳转到百度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p{
      text-align: center;

    }
    span{
      color: #ff0033;
    }
  </style>
</head>
<body>
  <p><span id="time">5</span>秒之后跳转到首页</p>

<script>

  /*
    分析:
      1.显示页面效果,p标签,5嵌套span标签
      2.倒计时
        用一个方法更改秒数
            定时器1秒执行一次
        当秒数为0时跳转页面
  */

  var second = 5;

  function fun(){
    second--;
    if (second<=0){
      location.href="https://www.baidu.com";
    }
    var time = document.getElementById("time");
    time.innerText = second+"";

  }
  setInterval(fun,1000);
</script>

</body>
</html>

6.History:历史记录对象

  

<body>
<input type="button" id="btn" value="获取历史列表数量">
<script>
  /*

1.创建:
  window.history
  history
2.方法:
  back():加载history中前一个url路径
  forward():加载history中下一个url路径
  go():去往history中指定的url路径
    参数:
       正数: 前进几个历史记录
       负数: 后退几个历史记录
3.属性:
length获取当前窗口历史列表中url的数量


*/
  var btn = document.getElementById("btn");
  btn.onclick = function (){
    var length = history.length;
    alert(length);

  }

</script>
</body>
posted @ 2022-12-31 14:34  会秃头的小白  阅读(32)  评论(0编辑  收藏  举报