2020.8.4-BOM里面的window对象的概述-CSDN博客

本文链接：https://blog.csdn.net/feimeng4s/article/details/107779555

BOM里面的window对象的概述

概念：Brower Object Model 浏览器对象模型
- 将浏览器的各个组成部分封装成对象
  - 项目
组成
- Window:窗口对象
- Navigator:浏览器对象
- Screen:显示器屏幕对象
- History:历史记录对象
- Location:地址栏对象
  插入一个东西：结论：（1）只使用字符的字符串，单引号和双引号没有区别
  （2）在单引号包括的字符串中可以直接用双引号，在双引号包括的字符串中可以直接用单引号
  （3）如果在双引号包括的字符串中用双引号，需要用反斜杠转义，注意是"" ;同样在单引号包括的字符串中用单引号，也需要转义
  （4）如果要用反斜杠，则输入‘\’
  具体详解代码如下，里面具有一定的参考价值：

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



</head>
<body>
    <!--关于这个标签还是得深入研究才行啊-->
    <!--<input type="button" id="button" value="打开新窗口">-->
    <!--<input type="button" id="button2" value="关闭新窗口">-->
    <script>

        /*
        BOM和浏览器关系密切，DOM和HTML文档有关。BOM是Browser Object Mode的缩写，
        及对浏览器对象模型，用来获取或设置浏览器的属性、行为。
        * 1 创建
        * 2 方法
        *   接下来就是学习这些方法
        *   1 与弹出框有关的
        *       alert()显示带有一段消息和一个确认按钮的警告框。
        *       confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。
        *           如果用户点击确定按钮，则方法返回true，如果用户点击取消按钮，则方法返回false
        *       prompt()显示可提示用户输入的对话框。返回用户输入的值
        *
        *   2 与打开关闭窗口有关的方法
        *       看文档open和close 注意这个close方法是谁调用我我关谁,open是有返回值的
        *       这一点在手册里面都没有写到，返回一个新的Window对象
        *
        *   3 与定时器有关的方法
        *       setTimeout() 在指定的毫秒数后调用函数或计算表达式。
        *       clearTimeout()取消由 setTimeout() 方法设置的 timeout。怎么指定取消的是哪个定时器呢
        *       这个setTimout会有一个返回值，把返回值放进去就行了。
        *       * 参数 1 js代码或者方法对象加引号 2 毫秒值
        *       * 返回值：唯一标识，用于取消定时器
        * 3 属性
        *       1 获取其他的BOM对象
        *       history对 History 对象的只读引用。请参数 History 对象。
        *       Navigator对 Navigator 对象的只读引用。请参数 Navigator 对象。
        *       Screen对 Screen 对象的只读引用。请参数 Screen 对象。
        *       location用于窗口或框架的 Location 对象。请参阅 Location 对象。
        *
        *       2 获取DOM对象
        *       document对 Document 对象的只读引用。请参阅 Document 对象。
        *       原来这个对象是从window获得来的
        * 4 特点
        *  Window对象不需要创建可以直接使用 window使用。window.方法名()；
        *  window引用可以省略   方法名()
        *  其中先前使用的alert() 弹出方法就是这个对象下面的
        *  接下来就是学习这些方法
        * */


        //var flag = confirm("你确定要退出吗");
        //alert(flag);

        /*var pro = prompt("请输入");
        alert(pro);*/
        //点击页面某个元素，打开新窗口，这里点击按钮，打开新窗口
        /*var bu = document.getElementById("button");
        var bu2 = document.getElementById("button2");
        var open;
        bu.οnclick=function () {
           open = open("http://www.baidu.com");

        }
        bu2.οnclick=function () {
            open.close();
        }*/
       /* alert("hehe");
        window.setTimeout("alert(\"执行\")",3000);//为什么里面是这个单引号外面是双引号呢*/

       //获取history对象
        var h1 = window.history;
        var h2 = history;
        alert(h1);
    </script>

</body>
</html>

在这下面放一个轮播图的案例，是用取模的方法做出来的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window案例1_轮播图</title>
</head>
<body>
    <!--关于这个标签还是得深入研究才行啊-->
    <!--<input type="button" id="button" value="打开新窗口">-->
    <!--<input type="button" id="button2" value="关闭新窗口">-->
    <img src="img/黄霄雲.jpg"id="image"width="100%">

    <script>
        var image = document.getElementById("image");
        var i=0;
        var flag2=false;
        function  fun() {
            while(true){
                if(i%3==1){
                    image.src="img/黄霄雲.jpg";
                }
                if(i%3==2){
                    image.src="img/壁纸乡村.jpeg";
                }
                if(i%3==0){
                    image.src="img/捕获7.png";
                }

                if(i==3){
                    i=0;
                }
                i++;
                break;
            }
        }
        setInterval("fun()",500);
    </script>
</body>
</html>