js浏览器对象模型（Brower Object Model）

最新推荐文章于 2022-10-06 01:06:03 发布

么心么肺

最新推荐文章于 2022-10-06 01:06:03 发布

阅读量192

点赞数

分类专栏： JS基础

本文链接：https://blog.csdn.net/weixin_41545048/article/details/106709717

版权

JS基础专栏收录该内容

21 篇文章 0 订阅

订阅专栏

BOM：浏览器对象模型， Brower Object Model。

DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]
BOM 是各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]

一、javaScript Window

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性；全局函数是 window 对象的方法。
1.window.open() ：打开新窗口
2.window.close() ：关闭当前窗口
3.window.moveTo() ：移动当前窗口
4.window.resizeTo() ：调整当前窗口的尺寸

html部分

	<input type="button" value="打开窗口" onclick="openWin()" />
    <br><br>
    <input type="button" value="移动窗口" onclick="moveWin()" />
    <br><br>
    <input type="button" value="调整大小" onclick="resizeWin()" />
    <br><br>
    <input type="button" value="关闭窗口" onclick="closeWin()" />

js部分

    <script>
        function openWin() {
            myWindow = window.open('', '', 'width=250,height=100,top=150, left=250, toolbar=yes, menubar=no, scrollbars=no, resizable=yes,location=yse, status=no');
            var time = new Date(),
                res = ""
                // console.log(time); //Fri Jun 19 2020 17:00:40 GMT+0800 (中国标准时间)
            let y = time.getFullYear()
            let m = time.getMonth() + 1
            let d = time.getDate()
            let h = time.getHours()
            let f = time.getMinutes()
            let s = time.getSeconds()
            res = y + "年" + m + "月" + d + "日" + h + "时" + f + "分" + s + "秒"
            myWindow.document.write(res);
        }

        function moveWin() {
            myWindow.moveTo(500, 500);
            myWindow.focus();
        }

        function resizeWin() {
            myWindow.resizeTo(450, 200);
            myWindow.focus();
        }

        function resizeWin() {
            myWindow.resizeTo(450, 200);
            myWindow.focus();
        }

        function closeWin() {
            myWindow.close();
            myWindow.focus();
        }
    </script>

5.Window 尺寸 ：有三种方法能够确定浏览器窗口的尺寸

window.innerHeight/window.innerWidth
document.documentElement.clientHeight/document.documentElement.clientWidth
document.body.clientHeight/document.body.clientWidth

在这里插入图片描述

 function getSizeWin() {
            console.log(document.documentElement.clientHeight); // 可见区域高度，不包括滚动条   268
            console.log(document.documentElement.clientWidth); // 可见区域宽度，不包括滚动条    1536

            console.log(document.body.clientHeight); //body对象高度 206   
            console.log(document.body.clientWidth); //body对象宽度 1520   

            console.log(document.documentElement.offsetHeight); //设置或获取页面文档向右滚动过的像素数。 offsetHeight=height+padding+border 222
            console.log(document.documentElement.offsetWidth); //设置或获取页面文档向下滚动过的像素数。 offsetWidth=width+padding+border  1536

            console.log(document.documentElement.scrollHeight); // 浏览器所有内容高度   268
            console.log(document.body.scrollHeight); // 浏览器所有内容高度   206

            console.log(document.documentElement.scrollTop); //浏览器滚动部分高度  0
            console.log(document.body.scrollTop); //  浏览器滚动部分高度     0
        }

二、javaScript弹窗

1. alert:弹出一个警告框，输出相应信息
在这里插入图片描述 2. confirm:弹出一个确认框，提醒用户是否确认当前的操作

3.prompt:弹出一个输入框，允许用户输入内容

window.prompt("sometext","defaultvalue"); 在这里插入图片描述

三、javaScript计时器

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。

<body>
    <p id="demo"></p>
    <script>
        function myTimer() {
            var d = new Date();
            var t = d.toLocaleTimeString();
            document.getElementById("demo").innerHTML = t;
        }
        var myVar = setInterval(function() {
            myTimer()
        }, 1000);
        setTimeout(function() {
            clearInterval(myVar);
        }, 5000)
    </script>
</body>

通过setTimeout开启定时任务，setInterval控制每间隔1s显示一次，5s后通过 clearInterval清除定时任务

四、javaScript Cookie

创建Cookie

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

删除Cookie

删除 cookie只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT，删除时不必指定 cookie 的值。:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

修改Cookie

修改Cookie类似于创建Cookie，是将旧的Cookie覆盖掉

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

读取Cookie

document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

var x = document.cookie;

五、javaScript Window Screen

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

返回访问者屏幕的宽高度，以像素计，减去界面特性，比如窗口任务栏。

在这里插入图片描述

六、javaScript Window Location

在这里插入图片描述

七、javaScript Window History

history.back() :后退
history.forward() :前进
history.go(n)：-1/0/1

八、javaScript Window Navigator

在这里插入图片描述

么心么肺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录