（六）--BOM

最新推荐文章于 2023-07-07 11:04:40 发布

顺毛黑起

最新推荐文章于 2023-07-07 11:04:40 发布

阅读量106

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/Apikaqiu/article/details/111326998

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

概念：Browser Object Model 浏览器对象模型

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

组成：

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

Window：窗口对象

Window：
1.创建
2.方法

1.与弹出框有关的方法
       alert()显示带有一段消息和一个确认按钮的警告框。
       confirm()显示带有一段消息以及确认按钮和取消按钮的对话框
                 如果用户点击确定按钮，则方法返回true
                 如果用户点击取消按钮，则方法返回false
        prompt()显示可提示用户输入的对话框
                 返回值：获取用户输入的值

  2.与打开关闭有关的方法：
                  close()关闭浏览器窗口
                      谁调用该方法，该方法关闭该窗口
                  open()打开一个新的浏览器窗口
                      返回新的Window对象

  3.与定时器有关的方法
              setTimeout()    在指定的毫秒数后调用函数或计算表达式
                  参数：
                      1.js代码或者方法对象
                      2.毫秒值
                  返回值：唯一标识，用于取消定时器
              clearTimeout()  取消由setTimeout()方法设置的timeout

              setInterval()   按照指定的周期（以毫秒计）来调用函数或者计算表达式
              clearInterval() 取消由 setInterval()方法设置的timeout

3.属性

  1.获取其他BOM对象
           history
           location
           Navigator
           Screen

```
 2.获取DOM对象
          document
```

4.特点

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

  window引用可以省略。方法名();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window对象</title>

</head>
<body>
<input id="openBtn" type="button" value="打开窗口"  >
<input id="closeBtn" type="button" value="关闭已经打开的那个窗口">
<script>
 
    /*alert("Hello Window");
    window.alert("Hello a");

     */
    /*
    var flag=confirm("您确定要退出吗？");
    if (flag){
        //退出操作
        alert("欢迎再次光临！");
    }else {
        //提示：手别抖...
        alert("手别抖...");
    }
    */
    /*
   //输入框
    var result=prompt("请输入用户名");
    alert(result);

     */

    //打开新窗口
    /*var opemBtn=document.getElementById("openBtn");
    var newwindow;
    opemBtn.οnclick=function(){
        newwindow=open("https://www.baidu.com");
    }
    //关闭新窗口
    var closeBtn=document.getElementById("closeBtn");
    closeBtn.οnclick=function(){
        newwindow.close();
    }

     */

    //一次性定时器
    //setTimeout("fun();",3000);
    //var id=setTimeout("fun",3000);
    //clearTimeout(id);
    function fun() {
        alert('boom~~~');
    }

    //循环定时器
    /*var id=setInterval(fun,3000);
    clearInterval(id);

     */

    //获取history
    var h1=window.history;
    var h2=history;

    alert(h1);
    alert(h2);

    var openBtn=window.document.getElementById("openBtn");
    //document.getElementById("");
    alert(openBtn);

</script>
</body>
</html>

案例：轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>

</head>
<body>
<img id="img" src="picture/1.png" width="100%">

<script>
    /*
        1.在页面上使用img标签展示图片
        2.定义一个方法，修改图片对象的src属性
        3.定义一个定时器，每隔3秒调用方法一次
     */

    //修改图片对象的src属性
    var number=1;
    function fun() {
        number++;
        //判断number是否大于3
        if (number>3){
            number=1;
        }
        //获取img对象
        var img=document.getElementById("img");
        img.src="picture/"+number+".png";
        
    }

    //定义定时器
    setInterval(fun,3000);

</script>
</body>
</html>

Location:地址栏对象

  1.创建（获取）：
  	1.window.location
  	2.location

  2.方法：
  	reload()	重新加载当前文档。刷新

  3.属性
  	href	设置或返回完整的URL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location对象</title>

</head>
<body>
    <input type="button" id="btn" value="刷新">
    <input type="button" id="gobaidu" value="去百度">

    <script>
        //reload方法，定义一个按钮，点击按钮，刷新当前页面
        //1.获取按钮
        var btn=document.getElementById("btn");
        //2.绑定单击事件
        btn.onclick=function () {
            //3.刷新页面
            location.reload();
        }

        //获取href
        var href=location.href;
        //alert(href);

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

案例：自动跳转首页

        分析：
            1.显示页面效果<p>
            2.秒数倒计时
                定时器
                    2.1定义一个方法，获取span标签，修改span标签体内容
                    2.2定义一个定时器，1秒执行1次方法
            3.在方法中判断时间如果小于等于0，则跳转到首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转首页</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: aquamarine;
        }
    </style>
    <script>
      
        //2.倒计时读秒效果实现
        var second=5;
        function showTime() {
            second--;
            //判断时间如果小于等于0，则跳转到首页
            if (second<=0){
                //跳转到首页
                location.href="https://www.baidu.com";
            }
            var time=document.getElementById("time");
            time.innerHTML=second+"";

        }
        //设置定时器，1秒执行1次该方法
        setInterval(showTime,1000);
    </script>
</head>
<body>
<p>
    <span id="time">5</span>秒之后，自动跳转到首页...
</p>

</body>
</html>

history：历史记录对象

  1.创建（获取）：
  		1.window.history
  		2.history

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

  3.属性
  		length	返回当前窗口历史列表中的URL数量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history历史对象</title>
</head>
<body>
    <input type="button" id="btn" value="获取历史记录个数">
    <a href="案例_轮播图.html">轮播图页面</a>
    <input type="button" id="forward" value="前进">
<script>
   
    //1.获取按钮
    var btn=document.getElementById("btn");
    //2.绑定单击事件
    btn.onclick=function () {
        //获取当前窗口历史记录的个数
        var length=history.length;
        alert(length)
    }

    //1.获取按钮
    var forward=document.getElementById("forward");
    //2.绑定单击事件
    forward.onclick=function () {
        //前进
        //history.forward();
        history.go(1);
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>

</head>
<body>
<img id="img" src="picture/1.png" width="100%">
<input type="button" id="back" value="后退">

<script>
   
    //修改图片对象的src属性
    var number=1;
    function fun() {
        number++;
        //判断number是否大于3
        if (number>3){
            number=1;
        }
        //获取img对象
        var img=document.getElementById("img");
        img.src="picture/"+number+".png";

    }

    //定义定时器
    setInterval(fun,3000);

    //1.获取按钮
    var back=document.getElementById("back");
    //2.绑定单击事件
    back.onclick=function () {
       //后退
        //history.back();
        history.go(-1);
    }
</script>
</body>
</html>

顺毛黑起

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（六）--BOM

概念：Browser Object Model 浏览器对象模型将浏览器的各个组成部分封装成对象组成： Window：窗口对象 Navigator：浏览器对象 Screen：显示器屏幕对象 History：历史记录对象 Location：地址栏对象Window：窗口对象Window：1.创建2.方法1.与弹出框有关的方法 alert()显示带有一段消息和一个确认按钮的警告框。 confirm()显
复制链接

扫一扫

专栏目录