第二节 BOM及案例轮播图、自动跳转页面

第二节 BOM

1.概念

Browser Object Model 浏览器对象模型

将浏览器的各个组成部分封装成对象。

2.组成

Window：窗口对象

Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象

3.window：窗口对象

1.创建

2.方法

1.与弹出框有关的方法

alert() 显示一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
- 如果用户点击确认按钮，返回true
- 如果用户点击取消按钮，则返回false
```
<script>
	var flag = confirm("拜拜");
    if(flag){
        alter("慢走不送");
    }else{
        alter("怎么又回来了");
    }
</script>
```
prompt() 显示可提示用户输入的对话框

<script>
	let result = prompt("来玩啊");
    alert("欢迎"+result);
</script>

2.与打开关闭浏览器窗口有关的方法

close() 关闭浏览器窗口

谁调用关谁

open() 打开一个新的浏览器窗口

返回新的window对象

示例代码

<body>
    <input id = "openBtn" type = "butten" value = "打开窗口">
    <input id = "closeBtn" type = "butten" value = "关闭窗口">
    
    <script>
        // 打开窗口
    	var openBtn = document.getElementById("openBtn");
        var newWindow;
        openBtn.onclick = function (){
            newWindow.open();
        }
        // 关闭窗口(关闭上一个openBtn打开的窗口)
        var closeBtn = document.getElementById("closeBtn");
        closeBtn.onclick = function(){
            newWindow.close();
        }
    </script>
</body>

3.与定时器有关的方法

1.setTimeout()

在指定的毫秒值后调用函数或计算表达式。

参数：
1. js代码或者方法对象
2. 毫秒值
返回值：唯一标识，用于取消定时器

2.clearTimeout()

取消由 setTimeout() 方法设置的定时器

3.setInterval()

按照指定的周期（以毫秒计）来调用函数或者计算表达式

4.clearInterval()

取消由setInterval() 设置的timeout

示例案例

轮播图

<body>
	<img id = "img" src = "img/banner_1.jpg" width = "100%">
    
    <script>
        var number = 1;
        function fun(){
            number++;
            if(number > 3){
               	number = 1;
               }
        var img = document.getElementById("img");
        img.src = "img/banner_"+number+".jpg";
        }
        setInterval(fun,3000);
    </script>
</body>

3.属性：

1. 获取其他BOM对象：
history
location
Navigator
Screen:
2. 获取DOM对象
document

4.特点

Window对象不需要创建可以直接使用 window使用。 window.方法名();
window引用可以省略。方法名();

4. Location：地址栏对象

创建(获取)：
1. window.location
  2. location
方法：

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

属性

href 设置或返回完整的 URL。

示例代码

<body>
    <input id="btn" type="button" value="刷新">
    <input id="gobaidu" type="button" value="百度">
    <script>
      // 1.获取按钮
      var btn = document.getElementById("btn");
      // 2.绑定单击事件
      btn.onclick = function () {

        // 3.刷新页面
        location.reload();
      }

      // 获取href
      var href = location.href;
      alert(href);
      // 1.获取按钮
      var baidu = document.getElementById("gobaidu");
      // 2.绑定单击事件
      baidu.onclick = function () {
        // 3.去访问百度官网
        location.href = "https://www.baidu.com";
      }
    </script>
  </body>

案例：自动跳转页面

<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>
      var second = 5;
      var time = document.getElementById("time")

      // 定义一个方法，获取span标签，修改span标签内容，时间--
      function showTime() {
        second--;
        // 判断时间如果等 <=0，则跳转到首页
        if (second <= 0){
          // 跳转到首页
          location.href = "https://www.baidu.com";
        }
        time.innerHTML = second+" ";
      }
      // 设置定时器，1秒执行一次
      setInterval(showTime,1000);
    </script>
  </body>
</html>

5.History:历史记录

1.创建（获取）：

window.history
history

2.方法：

back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go(参数) 加载 history 列表中的某个具体页面。
- 参数：
  - 正数：前进几个历史记录
  - 负数：后退几个历史记录

3.属性：

length 返回当前窗口历史列表中的 URL 数量。

第二节 BOM及案例轮播图、自动跳转页面

第二节 BOM

1.概念

2.组成

3.window：窗口对象

1.创建

2.方法

1.与弹出框有关的方法

2.与打开关闭浏览器窗口有关的方法

示例代码

3.与定时器有关的方法

1.setTimeout()

2.clearTimeout()

3.setInterval()

4.clearInterval()

轮播图

3.属性：

4.特点

4. Location：地址栏对象

案例：自动跳转页面

5.History:历史记录

1.创建（获取）：

2.方法：

3.属性：

猜你喜欢