BOM即浏览器对象模型，它包括如下一些对象！

（一）screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。

常见的属性有：

availHeight:返回显示屏幕的高度

availWidth:返回显示屏幕的宽度

colorDepth:返回目标设备或缓冲器上的调色板的比特深度。

height:返回屏幕区域的实际高度

width:返回屏幕区域的实际宽度

（二）Window对象,Window 对象表示一个浏览器窗口或一个框架。

常见方法：

(1)窗口的打开与关闭：

window.open(URL,name,features,replace),四个都为可选参数

URL：新窗口中显示的文档的 URL

name：声明了新窗口的名称

features：声明了新窗口要显示的标准浏览器的特征

replace：布尔值，true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。

window.close()关闭当前窗口

（2）改变窗口的位置和大小：

moveTo(x,y) 方法可把窗口的左上角移动到一个指定的坐标。

moveBy(x,y) 方法可相对窗口的当前坐标把它移动指定的像素。

resizeTo(width,height) 方法用于把窗口大小调整为指定的宽度和高度。

resizeBy(x,y) 方法用于根据指定的像素来调整窗口的大小。

(3)状态栏，通过设置window对象的status属性和defaultStatus属性来改变状态栏显示的基本信息。

如： window.defaultStatus = "php点点通";

(4)定时设定,定时器可以在特定的时间内执行特定的函数

setTimeout(epress,time) 方法用于在指定的毫秒数后调用函数或计算表达式。

clearTimeout(timeID)停止已经启动的定时器

如下脚本：

<script>

  • function timer(){
  • var t = setTimeout("alert('5秒到了')",5000);
  • }
  • </script>
  • <input type="button" value="点击改变" onclick="timer()" />

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

clearInterval()停止使用setInterval() 方法

如下脚本：

<script>

  • var timer;
  • function start(){
  • var date = new Date().toLocaleString();
  • window.status = date;
  • }
  • </script>
  • <input type="button" value="显示时间" onclick="timer=setInterval('start()',1000)" />
  • <input type="button" value="停止时间" onclick="clearInterval(timer)" />

(5)Navigator对象，包含的属性描述了正在使用的浏览器

appName:返回浏览器的名称。

appVersion:返回浏览器的平台和版本信息。

platform:返回运行浏览器的操作系统平台。

appCodeName:返回浏览器的代码名。

(6)History对象，其实就是来保存浏览器历史记录信息。

其属性有：length，返回浏览器历史列表中的 URL 数量。

其方法有：

back()加载 history 列表中的前一个 URL。

forward()加载 history 列表中的下一个 URL。

go()加载 history 列表中的某个具体页面。

如常见的返回上一页：History.go(-1)和history.back()

(7)Location对象，Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

其方法：

hash:设置或返回从井号 (#) 开始的 URL（锚）。

host:设置或返回主机名和当前 URL 的端口号

hostname:设置或返回当前 URL 的主机名。

href:设置或返回完整的 URL。

pathname:设置或返回当前 URL 的路径部分

port:设置或返回当前 URL 的端口号

protocol:设置或返回当前 URL 的协议。

search:设置或返回从问号 (?) 开始的 URL（查询部分）。

其方法：

assign()加载新的文档。

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

replace()用新的文档替换当前文档。

上面是我从网上摘抄的文档,基本上涵盖了我们所有我们学过的基础知识,还有部分的超出(如navigator对象).

计时器是个重点,合适的增加计时器和删除计时器是个难点,而且计时器的多次加入也会影响网页的性能,所以我们提倡少用计时器或者是不用计时器.

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
</form>
<p>请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时，从 0 开始。点击“停止计时”按钮可以终止计时。</p>
<p>timedCount(),1000ms自己调自己。</p>
</body>
</html>

上面是一段计时器代码,其实就是掌握几个对象,和相应的几个方法和区别.

JS BOM(浏览器对象)的更多相关文章

  1. BOM浏览器对象

    BOM 浏览器对象 一.浏览器本身就自己有一些对象,不用创建就可以使用 window(当前浏览器窗体) 属性: status opener closed parent top 方法: alert(); ...

  2. js中浏览器对象BOM

    参考  :  https://www.cnblogs.com/Peng2014/p/4725524.html 1. window对象   https://www.runoob.com/jsref/ob ...

  3. JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}

    前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...

  4. BOM浏览器对象模型和API速查

    什么是BOMBOM是Browser Object Model的缩写,简称浏览器对象模型BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是wi ...

  5. js BOM浏览器对象模型

    BOM即Browser Object Model,浏览器对象模型,表示浏览器窗口,所有js全局对象.函数以及变量均是window 对象的成员. 对于不同的浏览器,表示宽度和高度的方法不同: 对于IE9 ...

  6. JavaScirpt(JS)——BOM浏览器对象模型

    一.BOM概念 BOM(Browser Object Model)即浏览器对象模型.可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关 ...

  7. js获取浏览器对象的信息

    js中有一个对象叫 navigator,navigator 对象包含有关浏览器的信息.所有的浏览器都支持该对象. 其中经常用到的是 navigator.userAgent 属性,通常,它是在 navi ...

  8. js··BOM 浏览器对象模型

    1.window.open(url,ways) url 是打开的网页地址 ways 打开的方式 _self 2.window.close() 3.浏览器用户信息 Window.navigator 4. ...

  9. js学习--浏览器对象计时器setInterval()与setTimeout()的使用与区别

    一.setInterval()与setTimeout()的定义: 二.setInterval()与setTimeout()的使用:    1.setInterval()与clearInterval() ...

随机推荐

  1. Kay and Snowflake CodeForces - 686D (树的重心性质)

    After the piece of a devilish mirror hit the Kay's eye, he is no longer interested in the beauty of ...

  2. 变分推断到变分自编码器(VAE)

    EM算法 EM算法是含隐变量图模型的常用参数估计方法,通过迭代的方法来最大化边际似然. 带隐变量的贝叶斯网络 给定N 个训练样本D={x(n)},其对数似然函数为: 通过最大化整个训练集的对数边际似然 ...

  3. PHP读取txt文件的内容并赋值给数组的代码

    使用file_get_contents()获取txt文件的内容,然后通过explode()把获得的字符串转化为数组. 获得数组长度可以使用count()函数 <?php $file = 'key ...

  4. linux 查找某文件所在路径

    find 路径 -name 文件名 例如:find / -name logo_web.png  查找/路径下logo_web.png文件路径 如果为非root账号可用 sudo find / -nam ...

  5. 【LuoguP5383】[模板]普通多项式转下降幂多项式

    传送门 Sol (怎么老是有人喜欢出新的多项式毒瘤板子,懒得整到一起了) 核心就是把 幂用下降幂来代替. 使用斯特林数展开幂为下降幂: \[x^n=\sum_{i=0}^n{x\choose i}i! ...

  6. Dubbo搭建HelloWorld-搭建服务提供者与服务消费者并完成远程调用(附代码下载)

    场景 Dubbo简介与基本概念: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103555224 Dubbo环境搭建-ZooKe ...

  7. State Processor API：如何读取，写入和修改 Flink 应用程序的状态

    过去无论您是在生产中使用,还是调研Apache Flink,估计您总是会问这样一个问题:我该如何访问和更新Flink保存点(savepoint)中保存的state?不用再询问了,Apache Flin ...

  8. 手动升级 Confluence 6 - 升级 Confluence

    4. 备份 备份你的数据库,并且确定的你的数据库备份已经被正确的创建了.如果你的数据库不支持在线备份的话,你需要首先停止 Confluence 的运行. 备份你的 Confluence 安装目录(in ...

  9. codevs 1231 最优布线问题 x（find函数要从娃娃抓起系列）

                         题目描述 Description 学校需要将n台计算机连接起来,不同的2台计算机之间的连接费用可能是不同的.为了节省费用,我们考虑采用间接数据传输结束,就是一 ...

  10. week6 作业

    week6 作业 1.每12小时备份并压缩/etc/目录至/backup目录中,保存文件名称格式为"etc-年-月-日-时-分.tar.gz" crontab -e */1 * * ...