BOM

最新推荐文章于 2022-05-17 21:51:10 发布

szmtjs10

最新推荐文章于 2022-05-17 21:51:10 发布

阅读量606

点赞数 1

分类专栏： javascript-2020年整理文章标签： javascript

本文链接：https://blog.csdn.net/szmtjs10/article/details/111566120

版权

javascript-2020年整理专栏收录该内容

8 篇文章 1 订阅

订阅专栏

BOM概述

BOM结构图说明
反映了BOM中各对象之间的层次关系；
在BOM中，window对象是顶层对象，其它对象均是其子对象；
history浏览器的浏览历史
location对象代表当前显示的文档的地址
Navigator对象提供有关浏览器的各种信息
screen对象提供显示器屏幕相关的一些信息
Frames[]为window对象的数组型属性，每一个数组元素对应框架集(frameset)中的一个框架(frame)所对应的窗口。
Document对象是对DOM的引用，代表了当前浏览器窗口中的网页文档

Window对象

Window对象是BOM与DOM的顶层对象，表示浏览器窗口或者框架中的框架。
Window对象是脚本中的全局对象，可以在任何地方调用，脚本中任何对象的使用最终都要追溯到对window对象的访问，所以在使用window对象的各种属性和方法时，window前缀可以省略。
访问window对象或子对象属性和方法，要按照层次关系，使用“.”运算符将它们连接起来。

window.alert();     简写方式     alert();
window.document.write();    简写方式   document.write()

在这里插入图片描述

open()——打开浏览器窗口

功能：打开一个新的浏览器窗口，返回一个window对象，将该对象赋予变量，可以跟踪该窗口
语法：winObj=open(URL,name,[options])
参数：
URL为打开的文档的URL地址；
name为新窗口的名称，一般为超链接target使用；
options为新窗口的外观设置

浏览器窗口外观属性
在这里插入图片描述

实例：弹出一个窗口

Window.open()实例

当网页加载完成，弹出一个新窗口，新窗口名字叫“win2”
新窗口的尺寸：width=200，height=200
新窗口在显示屏幕中居中显示
单击原窗口中的链接，在新窗口中显示内容
新窗口10秒钟后，自动关闭
效果图在下一张幻灯片

无法使用window.close()关闭Firefox窗口
第一步：在Firefox地址栏，输入about:config
第二步：找到选项 dom.allow_scripts_to_close_windows
第三步：右击“切换”将值改为“true”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出一个窗口</title>
<script type="text/javascript">
    function openWin()
    {
        //定义变量
        var url = "";		//打开的文件地址
        var name = "win2";  //窗口名称
        var width = 300;	//窗口文档宽度
        var height = 200;	//窗口中文档高度
        //计算新窗口相对于屏幕的坐标
        var x = (window.outerWidth-width)/2;
        var y = (window.outerHeight-height)/2;
        //构建新窗口的外观
        var options = "toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=no,";
        options += "width="+width+",height="+height+",";
        options += "left="+x+",top="+y;
        //新窗口中的输出信息
        var str = "<h2>当前窗口的相关信息</h2>";
        str += "窗口尺寸：width="+width+"，height="+height;
        str += "<br />窗口坐标：left="+x+",top="+y;

        //打开新窗口，并输出相关信息
        var winObj = window.open(url,name,options);
        winObj.document.write(str);

        //新窗口在10秒钟后，自动关闭
        winObj.setTimeout("close()",50000);
    }
</script>
</head>
<body onload="openWin()">
<h4>单击以下链接，在新窗口中显示内容</h4>
<a href="http://www.sina.com.cn" target="win2">新浪网</a>
<a href="http://www.ifeng.com.cn" target="win2">凤凰网</a>
<a href="https://www.csdn.net/" target="win2">CSDN</a>

</body>
</html>

延迟与周期执行

setTimeout()

功能：用于在指定的毫秒数后调用函数或计算表达式（执行一次）
语法：var timeout_name=setTimeout(code,millisec)
参数：code必需。要调用的函数后要执行的 JavaScript 代码串；millisec必需。在执行代码前需等待的毫秒数。
提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

clearTimeout()

功能：取消由 setTimeout() 方法设置的定时器
语法：clearTimeout(timeout_name)
参数：timeout_name由setTimeout()返回的ID值。该值标识了一个setTimeout定时器。

实例：简单计时器

创建一个按钮，用来显示信息
创建一个按钮，用来开始计时
创建一个按钮，用来停止计时

在这里插入图片描述

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

<script type="text/javascript">
    //简单计时器：使用setTimeout()方法实现
    var i= 0;
    var timeout;
    function start()
    {
        var obj = document.getElementById("result");
        var str ="程序已经运行了"+i+"秒！";
        obj.value = str;
        i++;
        timeout = setTimeout("start()",1000);
    }
    function stop()
    {
        clearTimeout(timeout);
    }
</script>
</head>
<body>
<input type="button" id="result" value="" /><br />
<input type="button" value="开始" onclick="start()" />
<input type="button" value="停止" onclick="stop()" />

</body>
</html>

setInterval()

功能：按照指定的周期（以毫秒计）来调用函数或计算表达式（重复执行）
语法：interval_name=setInterval(code,millisec)
参数：code必需，要调用的函数或要执行的代码串；millisec必需，周期性执行或调用 code 之间的时间间隔，以毫秒计
返回值：一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值
clearInterval()
功能：learInterval() 方法可取消由 setInterval() 设置的 timeout
语法：clearInterval(id_of_setinterval)
参数：id_of_setInterval是由setInterval返回的ID值

实例：单行文本框中滚动文本
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var str = "欢迎您！";
        var len = str.length;
        var dir = 0; //文字运动的方向，0向右运动，1向左运动
        function textAnimation()
        {
            var obj = document.getElementById("msg");
            if( dir == 0)
            {
                str = " "+str;  //在str左端添加一个空格
                obj.value = str;
                if(str.length == 40)
                {
                    //当字符串长度为40时，改变运动方向
                    dir = 1;
                }
            }else
            {
                //删除str左端的一个空格
                str = str.substring(1,str.length);
                obj.value = str;
                if(str.length == len)
                {
                    dir = 0;
                }
            }
        }
        setInterval("textAnimation()",100);
    </script>
</head>
<body>
<input id="msg" type="text" size="47" />


</body>
</html>

实例：图片自动切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片自动切换</title>
    <script language="javascript">
        var i = 1;
        function ppt()
        {
            i++;
            var obj = document.getElementById("obj");
            obj.src = "images/dd_scroll_"+i+".jpg";
            if(i==3)
            {
                i=0;
            }
        }
        function start()
        {
            setInterval("ppt()",1000);
        }
    </script>
</head>
<body onload="start()">
<img id="obj" src="images/dd_scroll_1.jpg" />
</body>


</body>
</html>

两者区别
setInterval()重复不断地执行所指定的函数或表达式；而setTimeout方法只在超时后执行一次。
setTimeout()方法要想重复执行所指定的函数或表达式，则需要在函数中递归调用自己

实例：移动窗口——moveTo()
在这里插入图片描述

注意：在单独的页面中，弹出一个新窗口，新窗口设置相关滚动属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出一个窗口</title>
    <script type="text/javascript">
        function openWin()
        {
            //定义变量
            var url = "";		//打开的文件地址
            var name = "win2";  //窗口名称
            var width = 300;	//窗口文档宽度
            var height = 200;	//窗口中文档高度
            //计算新窗口相对于屏幕的坐标
            var x = (window.outerWidth-width)/2;
            var y = (window.outerHeight-height)/2;
            //构建新窗口的外观
            var options = "toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=no,";
            options += "width="+width+",height="+height+",";
            options += "left="+x+",top="+y;
            //新窗口中的输出信息
            var str = "<h2>当前窗口的相关信息</h2>";
            str += "窗口尺寸：width="+width+"，height="+height;
            str += "<br />窗口坐标：left="+x+",top="+y;

            //打开新窗口，并输出相关信息
            var winObj = window.open(url,name,options);
            winObj.document.write(str);

            //新窗口在10秒钟后，自动关闭
            winObj.setTimeout("close()",50000);
        }

        var win_width = window.outerWidth;
        var win_height = window.outerHeight;
        var x_dir = "right";
        var y_dir = "down";
        var x_step = 2;
        var y_step = 2;
        var x_left = 0;
        var x_right = screen.availWidth - win_width;
        var y_up = 0;
        var y_down = screen.availHeight - win_height;

        //===移动窗口===
        function moveWin()
        {
            //==当前坐标
            var x_now = window.screenX;
            var y_now = window.screenY;

            //==左移
            if(x_dir == "right")
            {
                if((x_now+x_step)<=x_right)
                {
                    x_now += x_step;
                }else
                {
                    x_dir = "left";
                }
            }else if(x_dir == "left")
            {
                if((x_now-x_step)>x_left)
                {
                    x_now -= x_step;
                }else
                {
                    x_dir = "right";
                }
            }
            //==新的垂直坐标
            if(y_dir == "down")
            {
                if((y_now+y_step<=y_down))
                {
                    y_now += y_step;
                }else
                {
                    y_dir = "up";
                }
            }else if(y_dir == "up")
            {
                if((y_now-y_step)>0)
                {
                    y_now -= y_step;
                }else
                {
                    y_dir = "down";
                }
            }

            //==绝对移动窗口
            window.moveTo(x_now,y_now)
        }
        setInterval("moveWin()",10);



    </script>
</head>
<body onload="openWin()">
<h4>单击以下链接，在新窗口中显示内容</h4>
<a href="http://www.sina.com.cn" target="win2">新浪网</a>
<a href="http://www.ifeng.com.cn" target="win2">凤凰网</a>
<a href="https://www.csdn.net" target="win2">CSDN</a>

</body>
</html>

实例：滚动网页内容——scrollBy()
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var time1;
        var time2;
        function scrollDown()
        {
            clearTimeout(time1);
            clearTimeout(time2);
            scrollBy(0,100);
        }
        function scrollUp()
        {
            clearTimeout(time1);
            clearTimeout(time2);
            scrollBy(0,-100);
        }
        function autoDown()
        {
            scrollBy(0,10);
            if(time2)
            {
                clearTimeout(time2);
            }
            time1 = setTimeout("autoDown()",100);
        }
        function autoUp()
        {
            scrollBy(0,-10);
            if(time1)
            {
                clearTimeout(time1);
            }
            time2 = setTimeout("autoUp()",100);
        }
    </script>
    <style type="text/css">
        body,input{margin:0px;padding:0px;}
        input{width:120px;padding:5px;}
        #con{
            width:120px;
            border:1px solid #cccccc;
            position:fixed;
            right:140px;
            top:100px;
        }
        .news{width:800px;margin:0px auto;font-size:18px;line-height:28px;}
    </style>
</head>
<body>
<div id="con">
    <input type="button" onclick="scrollDown()" value="向下滚动100像素" /><br />
    <input type="button" onclick="scrollUp()" value="向上滚动100像素" /><br />
    <input type="button" onclick="autoDown()" value="向下自动滚动" /><br />
    <input type="button" onclick="autoUp()" value="向上自动滚动" />
</div>
<div class="news">
    <p>昨日，国务院办公厅发布关于修改《全国年节及纪念日放假办法的决定》，并同时公布《关于2014年部分节假日安排的通知》。与此前执行的休假方案相比，新休假政策最大的不同是除夕不再是法定假日，春节长假从大年初一到初七；不再实行拼假式的小长假，因此今年元旦将只休一天。假日总量与之前没有变化，均为11天。</p>

    <p><b>春节国庆长假保留</b></p>

    <p>新修改的全国年节及纪念日放假办法指出，国务院决定对《全国年节及纪念日放假办法》作如下修改：将第二条第二项修改为：“（二）春节，放假3天（农历正月初一、初二、初三）”。本决定自2014年1月1日起施行。

        昨日公布的《关于2014年部分节假日安排的通知》指出，2014年春节从1月31日至2月6日放假调休，共7天。1月26日（星期日）、2月8日（星期六）上班。这就意味着，除夕将被“踢”出春假长假“序列”，也不再具有法定假日的身份。

        国庆长假得到保留，即从10月1日至7日放假调休，共7天。9月28日（星期日）、10月11日（星期六）上班。</p>
    <p>
        公众最“吐槽”的拼假式小长假的休假模式在新休假政策中得到调整。此前国家假日办公布三套休假方案面向公众征集意见，其中方案C提出，小长假各放假一天，逢周二、周四时，调借相邻周六、周日形成3天小长假；逢周六、周日时周一补休。明年元旦、清明、中秋、端午、劳动节三个小长假也体现了这一方案的内容，即除元旦外，四个假日均实行与周末连休或者补休的政策，因此这四个假期均能分别实现三天小长假。但是由于明年的元旦是星期三，因此这一天将不“拼假”，仅休1月1日一天。</p>

    <p><b>新方案更贴近“方案C”</b></p>
    <p>
        11月27日零时至12月2日，国家假日办联合多家网站发布A、B、C三套休假方案，三套方案分别是，方案A国庆放假三天不调休、逢周末顺延，元旦、清明、端午、劳动节、端午各放假一天，不调休，仅在当天放假，逢周末时补休。方案B国庆放假三天，调借周六、日形成五天长假，元旦、清明、端午、劳动节、端午除了节假日在周三的情况，都会通过调借形成三天小长假。方案C为国庆调借周六、周日形成七天长假，其他节日与方案B一致。数据显示，有３１２万余名网友参与问卷调查，三套方案中只有方案C获得半数以上支持。这套方案保留春节和国庆两个７天调休长假。

        记者注意到，这三套方案均提出春节放假三天，但是均未提及这三天法定假日从除夕开始还是从初一开始。因此昨天公布的这套方案更贴近方案C。</p>

    <p><b>时隔6年元旦重回一天假</b></p>
    <p>
        经历了六年的元旦小长假，明年将迎来“瘦身”。在2007年公布的节假日方案调整中，清明、端午、元旦、中秋、劳动节均可以通过拼假实现三天小长假，而除夕正式成为法定节假日，与初一至初六“搭档”，共同凑成七天假期。但是从明年开始，由于元旦是星期三，根据现行规定，元旦将不再调休，只休一天。不过元旦小长假似乎并未达到预期的目的。多位旅行社负责人告诉北京晨报记者，由于前有“十一”黄金周、后有春节长假，因此元旦小长假的地位很尴尬，旅行社也将元旦小长假视为鸡肋。</p>

    <p>中国社会科学院旅游研究中心特约研究员刘思敏认为，此次出台的假日调整方案，是在现有条件下最好的一个选择：“理性的安排，结果接近最佳，这是对民意的尊重，也体现了民主和科学决策相结合。”而刘思敏所说的民意是，在假日总数没有增加的情况下，保留春节、“十一”长假则成了最受公众追捧的方案，这从网络问卷上可见一斑。

        刘思敏表示，网络调查并非最科学的方式，但是却是最接近民意的方式，“如果照搬方案C的话是不严肃的，因此我们才看到现在公布的方案是基于方案C的微调方案。”</p>
    <p>昨日，国务院办公厅发布关于修改《全国年节及纪念日放假办法的决定》，并同时公布《关于2014年部分节假日安排的通知》。与此前执行的休假方案相比，新休假政策最大的不同是除夕不再是法定假日，春节长假从大年初一到初七；不再实行拼假式的小长假，因此今年元旦将只休一天。假日总量与之前没有变化，均为11天。</p>

    <p><b>春节国庆长假保留</b></p>

    <p>新修改的全国年节及纪念日放假办法指出，国务院决定对《全国年节及纪念日放假办法》作如下修改：将第二条第二项修改为：“（二）春节，放假3天（农历正月初一、初二、初三）”。本决定自2014年1月1日起施行。

        昨日公布的《关于2014年部分节假日安排的通知》指出，2014年春节从1月31日至2月6日放假调休，共7天。1月26日（星期日）、2月8日（星期六）上班。这就意味着，除夕将被“踢”出春假长假“序列”，也不再具有法定假日的身份。

        国庆长假得到保留，即从10月1日至7日放假调休，共7天。9月28日（星期日）、10月11日（星期六）上班。</p>
    <p>
        公众最“吐槽”的拼假式小长假的休假模式在新休假政策中得到调整。此前国家假日办公布三套休假方案面向公众征集意见，其中方案C提出，小长假各放假一天，逢周二、周四时，调借相邻周六、周日形成3天小长假；逢周六、周日时周一补休。明年元旦、清明、中秋、端午、劳动节三个小长假也体现了这一方案的内容，即除元旦外，四个假日均实行与周末连休或者补休的政策，因此这四个假期均能分别实现三天小长假。但是由于明年的元旦是星期三，因此这一天将不“拼假”，仅休1月1日一天。</p>

    <p><b>新方案更贴近“方案C”</b></p>
    <p>
        11月27日零时至12月2日，国家假日办联合多家网站发布A、B、C三套休假方案，三套方案分别是，方案A国庆放假三天不调休、逢周末顺延，元旦、清明、端午、劳动节、端午各放假一天，不调休，仅在当天放假，逢周末时补休。方案B国庆放假三天，调借周六、日形成五天长假，元旦、清明、端午、劳动节、端午除了节假日在周三的情况，都会通过调借形成三天小长假。方案C为国庆调借周六、周日形成七天长假，其他节日与方案B一致。数据显示，有３１２万余名网友参与问卷调查，三套方案中只有方案C获得半数以上支持。这套方案保留春节和国庆两个７天调休长假。

        记者注意到，这三套方案均提出春节放假三天，但是均未提及这三天法定假日从除夕开始还是从初一开始。因此昨天公布的这套方案更贴近方案C。</p>

    <p><b>时隔6年元旦重回一天假</b></p>
    <p>
        经历了六年的元旦小长假，明年将迎来“瘦身”。在2007年公布的节假日方案调整中，清明、端午、元旦、中秋、劳动节均可以通过拼假实现三天小长假，而除夕正式成为法定节假日，与初一至初六“搭档”，共同凑成七天假期。但是从明年开始，由于元旦是星期三，根据现行规定，元旦将不再调休，只休一天。不过元旦小长假似乎并未达到预期的目的。多位旅行社负责人告诉北京晨报记者，由于前有“十一”黄金周、后有春节长假，因此元旦小长假的地位很尴尬，旅行社也将元旦小长假视为鸡肋。</p>

    <p>中国社会科学院旅游研究中心特约研究员刘思敏认为，此次出台的假日调整方案，是在现有条件下最好的一个选择：“理性的安排，结果接近最佳，这是对民意的尊重，也体现了民主和科学决策相结合。”而刘思敏所说的民意是，在假日总数没有增加的情况下，保留春节、“十一”长假则成了最受公众追捧的方案，这从网络问卷上可见一斑。

        刘思敏表示，网络调查并非最科学的方式，但是却是最接近民意的方式，“如果照搬方案C的话是不严肃的，因此我们才看到现在公布的方案是基于方案C的微调方案。”</p>
</div>
</body>

</html>

screen对象
window对象的screen属性提供一个screen对象，该对象提供显示器屏幕相关的一些信息
在这里插入图片描述
测试自己显示器屏幕的尺寸和有效尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    document.write(screen.width+"</P>");
    document.write(screen.height+"</P>");
    document.write(screen.colorDepth+"</P>");
    document.write(screen.availWidth+"</P>");
    document.write(screen.availHeight);
</script>

</body>
</html>

navigator对象
该对象提供有关浏览器的各种信息，所有浏览器都支持该对象
在这里插入图片描述
实例：查看自己浏览器的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看自己浏览器的信息</title>
    <script type="text/javascript">
        var str;
        str = "<h2>当前浏览器的基本信息</h2>";
        str += "浏览器名称："+navigator.appName;
        str += "<br />浏览器版本："+navigator.appVersion;
        str += "<br />运行平台："+navigator.platform;
        str += "<br />操作系统语言："+navigator.systemLanguage;
        str += "<br />浏览器使用的语言："+navigator.userLanguage;
        str += "<br />HTTP头中包含的字符串："+navigator.userAgent;
        str += "<br />Cookie是否启用："+navigator.cookieEnabled;
        document.write(str);
    </script>

</head>
<body>

</body>
</html>

location对象
该对象存储了当前显示的文档的地址，包括完整的URL地址以及组成URL地址的各个部分。其中各个属性被重新赋值后，浏览器将自动刷新，载入新的URL地址。
在这里插入图片描述

实例：输出地址的不同部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var str;
        str = "<h2>显示当前地址的相关信息</h2>";
        str += "<b>当前地址：</b>"+location.href;
        str += "<br /><b>协议：</b>"+location.protocol;
        str += "<br /><b>主机名和端口：</b>"+location.host;
        str += "<br /><b>主机名：</b>"+location.hostname;
        str += "<br /><b>页面路径：</b>"+location.pathname;
        str += "<br /><b>参数部分：</b>"+location.search;
        str += "<br /><b>锚点名称：</b>"+location.hash;
        document.write(str);
    </script>

</head>
<body>

</body>
</html>

history对象
该对象记录了浏览器的浏览历史，并提供一组方法访问曾经访问过的历史页面。
在这里插入图片描述

szmtjs10

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
BOM

BOM概述BOM结构图说明反映了BOM中各对象之间的层次关系；在BOM中，window对象是顶层对象，其它对象均是其子对象；history浏览器的浏览历史location对象代表当前显示的文档的地址Navigator对象提供有关浏览器的各种信息screen对象提供显示器屏幕相关的一些信息Frames[]为window对象的数组型属性，每一个数组元素对应框架集(frameset)中的一个框架(frame)所对应的窗口。Document对象是对DOM的引用，代表了当前浏览器窗口中的网页文档W
复制链接

扫一扫