简介：

1、BOM结构

2、window对象

3、location对象

4、history对象

5、navigator对象

6、screen对象

BOM 定时器

1、定时器方法

放大镜

简介：

BOM即浏览器对象模型（Browser Object Model），它提供了页面与浏览器窗口进行交互的对象接口。BOM由一系列的相关对象组成，window作为BOM的顶层对象，所有其他全局对象都是window的子对象，甚至DOM也是其子对象之一。学会了window对象及其子对象的常用属性方法，基本就掌握了BOM的大部分知识。

1、BOM结构

window对象作为BOM的顶级对象，本身包含一些全局属性和方法，其子对象也有其特有的属性和方法

使用window子对象时，可以使用完整语法，也可以忽略window，如：window.alert()与alert()效果相同

2、window对象

名称	描述
`open()`	打开一个新浏览器窗口
`alert()`	显示警告框
`close()`	关闭当前浏览器窗口
`scrollTo()`	可把内容滑动到指定坐标
`scrollBy()`	可将内容滑动指定的距离（相对于当前位置）
`innerWidth`	返回窗口的网页显示区域宽度
`innerHeight`	返回窗口的网页显示区域高度

2.1 open(url, name, features, replace)

url: 打开指定页面的url，如果没有则打开空白页
- name: 指定target属性或窗口名称，支持以下值：
  - _blank –- url加载到新窗口（默认）
  - _parent –- url加载到父框架
  - _self –- url替换当前页面
  - _top –- url替换任何可加载的框架集
  - name -- 窗口名称
features: 设置新打开窗口的功能样式（如：width=500）
replace
- true –- url替换浏览历史中的当前条目
- false –- 在浏览历史中创建新条目

// 新窗口打开csdn首页
open('https://www.csdn.net/')
// 当前窗口打开csdn首页
open('https://www.csdn.net/', '_self')
// 新窗口打开csdn首页，并设置窗口宽高500px
open('https://www.csdn.net/', '_blank', 'width=500,height=500')

2.2 scrollTo(xpos, ypos)

xpos：距离网页左上角x坐标
ypos：距离网页左上角y坐标

<style>.box { height: 3000px; }
</style>
<div class="box"><p>我是顶部</p>
</div>
<script>
window.addEventListener('load', function() {scrollTo(0, 500) // 页面加载后，滚动到距离顶部500px})
</script>

3、location对象

location对象包含当前url信息，经常用于网址判断，url跳转

名称	描述
`href`	返回当前完整网址
`host`	返回主机名和端口号，通常指完整域名
`protocol`	返回网址协议
`port`	返回端口号
`pathname`	返回网址路径部分
`search`	返回网址中的?及?后的字符串（查询部分），通常指查询参数
`hash`	返回网址中的#及#后的字符串，通常指锚点名称
`assign(url)`	在当前页面打开指定新url（增加浏览记录）
`reload()`	重新加载当前页面
`replace(url)`	打开新url替换当前页面（替换当前浏览记录）

3.1 获取网址信息

// 以https://www.csdn.net/nav/python?param1=111&param2=222#first为例，
查看输出结果
console.log(location.href)

// “https://www.csdn.net/nav/python?param1=111&param2=222#first” 
console.log(location.host)        // “www.csdn.net”

console.log(location.protocol)    // “https://”

console.log(location.pathname)  // “/nav/python”

console.log(location.search)     // “?param1=111&param2=222”

console.log(location.hash)       // “#first”

3.2 通过给href属性赋值url字符串的方式，可以跳转到对应url

location.href = 'https://www.csdn.net'

4、history对象

history对象包含用户浏览器的历史记录，但是不可读取，经常用于页面跳转

名称	描述	示例
`back()`	返回历史记录的上一个url	`history.back()`
`forward()`	返回历史记录的下一个url	`history.forward()`
`go(n)`	返回相对于当前记录的第n个url n>0，表前进；n<0，表后退；n=0，刷新当前页	`history.go(-1)` `history.go(1)`

5、navigator对象

navigator对象包含浏览器相关信息，经常用于判断设备类型，浏览器兼容性

名称	描述
`platform`	返回操作系统类型
`userAgent`	返回用户代理头的值

判断是否为谷歌内核：

navigator.userAgent.toLowerCase().indexOf('chrome')
// 返回-1时不是chrome内核，大于-1时是chrome内核

6、screen对象

screen对象包含用户屏幕的信息

名称	描述
`availWidth`	返回屏幕的宽度（不包括windows任务栏）
`availHeight`	返回屏幕的高度（不包括windows任务栏）
`width`	返回屏幕的总宽度
`height`	返回屏幕的总高度

BOM 定时器

1、定时器方法

方法名	定义	清除定时器方法
`setTimeout()`	指定的毫秒数后调用函数或计算表达式	`clearTimeout()`
`setInterval()`	按照指定的周期（毫秒）来调用函数或计算表达式	`clearInterval()`

1.1 setTimeout(代码字符串或函数, 等待的毫秒数, 参数1, 参数2…)

setTimeout()可执行代码字符串，如：a+b，但不推荐使用，有安全风险;

定时器到期时，可以通过setTimeout()的额外参数（参数1, 参数2…）给执行函数传递参数（IE9及以下浏览器不支持此语法）;

定时器清除方法clearTimeout(id)，id为setTimeout()的返回值;

示例：

<p class="info"></p>
<button class="btn">清除定时器</button>
<script>var info = document.querySelector('.info')var btn = document.querySelector('.btn')var t1 = setTimeout(function() {info.innerHTML = '已经5秒了'}, 5000);// 点击按钮可清除定时器var btn = document.querySelector('.btn')btn.addEventListener('click', function() {clearTimeout(t1)info.innerHTML = '定时器已清除'})
</script>

1.2 setInterval(代码字符串或函数, 运行间隔毫秒数，参数1, 参数2…)

语法与setTimeout()相似，区别是setInterval()第二个参数为运行间隔;

由于setInterval()是循环执行，如果没有特殊需求，则必须限制执行次数，使用clearInterval(id)清除定时器;

示例：

<p class="info"></p>
<script>var info = document.querySelector('.info')var num = 0var t1 = setInterval(function() { // 每隔1秒显示当前时间，5次后停止info.innerHTML = '当前时间：' + String(new Date())if (num >= 4) { clear() }num++}, 1000)// 清除定时器function clear() {clearInterval(t1)info.innerHTML = '定时器已清除'}
</script>

放大镜

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.s_box,.b_box{width:400px;height:300px;position: absolute;top:0;}.s_box{left:0;}.s_box img{width: 400px;height: 300px;}.s_box span{position: absolute;left:0;top:0;background: rgba(200,200,200,0.5);display: none}.b_box{left:500px;display: none;overflow: hidden}.b_box img{width: 1200px;height: 900px;position: absolute;left: 0;top: 0;}</style>
</head>
<body>
<div class="s_box"><img src="../../img/派大星.jpeg" alt=""><span></span>
</div>
<div class="b_box"><img src="../../img/派大星.jpeg" alt="">
</div>
</body>
<script>// OOP:编程function Magnifier(){// 1.选元素this.sBox = document.querySelector(".s_box");this.span = document.querySelector(".s_box span");this.bBox = document.querySelector(".b_box");this.bImg = document.querySelector(".b_box img");// 2.绑定事件this.init()}Magnifier.prototype.init = function(){var that = this;// 进入this.sBox.onmouseover = function(){// 3-1.显示，计算span的宽高that.show()}// 离开this.sBox.onmouseout = function(){// 3-2.隐藏that.hide()}// 移动this.sBox.onmousemove = function(eve){var e = eve || window.event;// 5.span跟随鼠标that.move(e)}}Magnifier.prototype.show = function(){// 显示，计算span的宽高this.span.style.display = "block";this.bBox.style.display = "block";this.span.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";this.span.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";}Magnifier.prototype.hide = function(){// 隐藏this.span.style.display = "none";this.bBox.style.display = "none";}Magnifier.prototype.move = function(e){// 计算移动的距离var l = e.clientX - this.span.offsetWidth/2;var t = e.clientY - this.span.offsetHeight/2;console.log(this.sBox.offsetTop);//  边界限定if(l<0) l=0;if(t<0) t=0;if(l>this.sBox.offsetWidth - this.span.offsetWidth){l=this.sBox.offsetWidth - this.span.offsetWidth}if(t>this.sBox.offsetHeight - this.span.offsetHeight){t=this.sBox.offsetHeight - this.span.offsetHeight}//  span跟随鼠标this.span.style.left = l + "px";this.span.style.top = t + "px";//  计算比例// 当前值 / 总值，得到的就是比例var x = l / (this.sBox.offsetWidth - this.span.offsetWidth);var y = t / (this.sBox.offsetHeight - this.span.offsetHeight);//  根据比例计算右边大图应该移动的距离// 比例 * 总值，得到的就是当前应该移动的距离this.bImg.style.left = x * (this.bBox.offsetWidth - this.bImg.offsetWidth) + "px";this.bImg.style.top = y * (this.bBox.offsetHeight - this.bImg.offsetHeight) + "px";}new Magnifier();
</script>
</html>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

If you want an embedded database (H2, HSQL or Derby), please put it on the classpath.
可能是这个的问题,去掉试试,再不行重启一下idea em....我是这样解决的...
2022/5/6 17:59:40
shell函数详解，基本使用进阶使用
一、基本使用 shell中可以自定义函数，然后在脚本中可调用，但必须保证先定义再使用。 1. 函数定义 function_name () {....[return int] } # 或者 function function_name() {.... }重点： function关键字可以省略，但加上更容易…...
2022/5/6 17:59:39
element同时使用Drawer和Dialog出现多个遮罩
如果我们正使用drawer的同时又使用了dialog就会出现多个遮罩层，我们只需要在dialog上加一个属性 modal-append-to-body“false” 就可以解决 <el-dialog title"新增" :modal-append-to-body"false" > </el-dialog>如果我们出现多个…...
2022/5/6 17:58:30
汇编实现通过输入被加数与加数，实现加法
DATAS SEGMENT OP1 DW 0 OP2 DW 0 RESULT DB 20 DUP(?) CARRY DB ? BUFSIZE DB 25 ACTCHAR DB ? CHARTEXT DB 26 DUP(20H);获取储存空间 DB $ DATAS ENDS STACKS SEGMENT ;此处输入堆栈段代码 STACKS ENDS CODES SEGMEN…...
2022/5/6 17:58:01
QT 点击按钮改变输入框中文字显示（明文或密文）
今天刚好要做这个功能，但是发现网上的参考资料有点少。所以就写了这篇。效果图如下： 在这之前先讲以下QLineEdit明文和密文的写法。代码如下关于setEchoMode的几种用法//默认，输入什么即显示什么echoLineEdit->setEchoMode(QLineEdit…...
2022/5/6 17:58:00
Android中View的创建流程解析
在AppCompatActivity的onCreate方法中我们都知道setContentView这个方法是加载布局文件。这个方法使用很简单直接把layout布局文件放进去就可以了。那么具体内部是怎么将它显示到桌面的呢，今天就从setContentView()来解析一下Android中View的创建过程。打开androi…...
2022/5/6 17:57:59
SWUST OJ#978 #979 #980 二叉树的遍历
目录深度优先遍历输出利用先序遍历创建的二叉树的前序遍历序列思路代码 #978 输出利用先序遍历创建的二叉树的中序遍历序列题目思路代码 #979 输出利用先序遍历创建的二叉树的后序遍历序列题目思路代码广度优先遍历 #980 输出利用先序遍历创建的二叉树…...
2022/5/6 17:57:30
来可车载2路CAN/FD脱机总线数据记录仪WiFi通讯收发下载离线回放
CANLog-VCI 车用诊断记录设备是一款支持 WIFI 实时传输、自带长时间报文存储功能、可以脱离 PC 独立运行的 2 路 CAN/CAN FD 总线数据记录仪。该产品通过内置 SD 卡记录数据，可通过 WIFI 实时传输数据到 PC 端， 便于用户监测数据和设备故障排查&#…...
2022/5/6 17:57:29
Shell
前言： 命令行和shell这两个概念常常使人困惑，今天我们就来讲讲命令行和shell是什么？ 命令行是指：提供用户输入命令的界面，其本身只接受输入，然后把命令传递给命令解释器。后者就是shell shell&#xff1…...
2022/5/6 17:57:28
《大话设计》——观察者模式
目录UML类图代码：抽象观察者Observer：具体观察者ConcreteObserver:抽象通知者Subject:具体通知者ConcreteSubject:客户端Client:运行结果：举例： 观察者模式实现注册的投资者在股票市场发生变化是，可以自动得到通知的功…...
2022/5/6 17:56:47
windows扫雷的模拟实现（C语言）
扫雷是之前windows自带的经典小游戏（目前已经没有默认安装了，需要store里下载），到现在全世界还拥有极多的粉丝。这里我们用C语言在控制台简单地模拟实现一下这个游戏，游戏的功能如下： 展示一张N*N的棋盘&am…...
2022/5/6 17:56:46
leetcode--933. 最近的请求次数
题目描述：写一个 RecentCounter 类来计算特定时间范围内最近的请求。请你实现 RecentCounter 类： RecentCounter() 初始化计数器，请求数为 0 。 int ping(int t) 在时间 t 添加一个新请求，其中 t 表示以毫秒为单位的某个时间&a…...
2022/5/6 17:55:05
十四讲——2.4.3和2.4.4
CMake CMakeLists.txt告诉cmake我们要做什么，要遵守cmake语法。 cmake处理了文件之间的关系，make相当于调用g编译文件 #cmake版本 cmake_minimum_required(VERSION 2.8) #声明cmake工程 project(HelloSLAM) #添加一个可执行程序可执行是带main函数的…...
2022/5/6 17:54:23
独家提出新概念，铸态机械性能
工业需求： 铸件在交付给制造厂之前，都经过了结构分析，力学性能分析，例如ABAQUS，也会考虑到结构的优化和裕度。并指定了相对应的力学性能测试标准。但在铸件实际生产之后，经过多次调试，都无法满足…...
2022/5/6 17:54:22
【串口服务器rs485通信教程】存储型网关工作模式
首先需要明白的是串口的通讯速率是远低于网口，主机在请求RTU设备通常只处理几个寄存器，“存储型网关”就是应用于这种工作环境。 “存储型网关”对主机请求的读取指令进行存储，当主机再次请求或者其他主机请求相同设备（地址码相同…...
2022/5/6 17:53:43
【第一章】Python数据模型
Python数据模型1.1一摞Python风格的纸牌1.1一摞Python风格的纸牌...
2022/5/6 17:53:42
Janusgraph学习记录（4）
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 Janusgraph学习记录（4） 前言格式化输出结果一、值操作 values(属性)和valueMap(属性)，分别返回值和键-值对，另外不建议直接…...
2022/5/6 17:53:41
Postgres服务无法启动的问题
按照postgres简单配置步骤，将pgsql注册为服务_BUG达咩的博客-CSDN博客对postgres注册服务，结果发现无法启动，如下图所示直接输入"C:\Program Files\pgsql\bin\pg_ctl.exe" runservice -N "pgsql" -D "C:\Program F…...
2022/5/6 17:52:43
关于CMD的学习
关于CMD的学习打开cmd的方式开始栏--->系统--->命令提示符 winr 键打开左下角运行界面，输入cmd(最推荐) 选中任意一个文件夹，按住shift鼠标右键，点击在此处打开power shell窗口(power shell 类似于cmd) win右键点击桌面左下角win…...
2022/5/6 17:52:43
mysql之order by自定义排序规则进行排序
1、问题描述今天接到一个任务按照设备状态进行排序，课中》在线》离线，4是课中，0是在线，1是离线，所以排序规则是4,0,1没有规律，现在要进行排序。 2、上代码 <select id"selectWorkGroupEquipment…...
2022/5/6 17:52:42

HTML--BOM window对象（实例：放大镜）

简介：

1、BOM结构

2、window对象

3、location对象

4、history对象

5、navigator对象

6、screen对象

BOM 定时器

1、定时器方法

放大镜

相关文章

最新文章