BOM

BOM:Browser Object Model 浏览器对象模型；

只要打开一个浏览器，就会创建一个window对象

一、window是一个全局对象

属性只能识别 var 声明的,方法只能识别字面量声明的函数

let i = 10; console.log(i); // 10 console.log(window.i); // undefined var j = 20; console.log(j); // 20 console.log(window.j); // 20 const k = 30; console.log(k); // 30 console.log(window.k); // undefined

let 全局变量与 var 全局变量的区别

let 全局变量无法被window使用

var 全局变量可以被window使用

即 var 声明变量（非函数内部）为window的属性

delete window.i; delete window.j; delete window.k; console.log(window.i,window.j,window.k); window.f70 = "name"; console.log(window.f70); // name delete window.f70; console.log(window.f70); // undefined

二、window 的属性和方法

window的属性

1、浏览器离屏幕的距离

不支持低版本IE浏览器（IE8）建议使用此版本

// 浏览器离屏幕左侧的距离 console.log(window.screenX); // 浏览器离屏幕顶部的距离 console.log(window.screenY);

不支持火狐浏览器

// 浏览器离屏幕左侧的距离 console.log(window.screenLeft); // 浏览器离屏幕顶部的距离 console.log(window.screenTop);

2、获取 window 的尺寸

（width height）

inner获取的是视口的尺寸

console.log(window.innerWidth); console.log(window.innerHeight);

outer获取的是浏览器的尺寸

console.log(window.outerWidth); console.log(window.outerHeight);

3、获取当前滚动条移动的距离

console.log(`水平滚动条移动：${window.pageXOffset}px`); console.log(`垂直滚动条移动：${window.pageYOffset}px`);

4、获取屏幕的尺寸(screen）

不包含任务栏

let pingmukuandu = screen.availWidth; // 横向滚动条 let pingmugaodu = screen.availHeight; // 垂直滚动条 console.log(pingmukuandu, pingmugaodu);

5、获取浏览器版本号

console.log(navigator.appVersion);

6、获取浏览器名字

console.log(navigator.appName);

7、获取浏览器的语言

console.log(navigator.language); // zh-CN简体中文

8、获取地址栏所有的内容

let info = location.search;

9、获取端口号

let info3 = location.port;

10、替换

replace(); 当前页面会显示新页面内容(共用一个窗口)

注：replace没有返回功能

function f70() { location.replace('./index.html') }

11、加载新页面

assign(); 当前页面显示新页面内容（与原页面不共用一个窗口）

注：assign 有返回功能

function f71() { location.assign("./index.html") }

12、【history】

history.back() //返回上一页 history.forward() //到下一页 history.go(-1) //上一页 history.go(0) //刷新 history.go(1) //下一页

window的方法

1、警示框，提示框（alert）

window.alert("Game over")

2、确定框（confirm）

let option = window.confirm("是否继续下一关？"); if (option) { window.alert("正在加载...下一关"); } else { window.alert('游戏结束！！！'); }

3、输入框（prompt）

返回值使用户输入的内容

let input = window.prompt('请输入您的手机号：'); let re = /^[1][3-9][0-9]{9}$/; let i = re.test(input); if (i) { window.alert("手机号正确"); } else { window.alert("手机号格式错误") } let j = input.match(re); if (j) { window.alert("手机号正确"); } else { window.alert("手机号格式错误") }

三、时间函数

setInterval(多个参数)

1、创建时间函数

2个参数：第一个参数：函数名（需要执行的代码）;第二个参数：设定的时间（毫秒）;第三个参数及以后，为第一个参数中函数的实参

​ 功能：根据设定的时间，执行函数

**例如：**setInterval(f70,1000)：每1秒钟调用一次 f70函数。

let i = 0; function f70() { console.log(`hahahahah${i++}`); } setInterval(f70, 1000);

时间函数第一个参数（函数）加小括号的书写方式

function f74(a,b) { console.log(a+b); } setInterval("f74(1,2)",1000);

2、停止时间函数

由于JS是由多个时间函数的，

如果想要停止时间函数，需要告知停掉那个时间函数；因此在创建时间函数时，需要用变量接收当前时间函数

停止时间函数的书写格式： clearInterval(接收时间函数返回值的变量)

let j = 5; let timer = setInterval(f71, 1000); function f71() { console.log(j--); if (j == 0) { // 停掉时间函数 clearInterval(timer); return; } }

四、延迟函数

功能:当达到设置时间后，执行相应的函数（只执行1次）

console.log(`请稍后，正在点钞`); function f72() { console.log(`取钱成功`); } setTimeout(f72,3000); // 三秒后执行函数 f72