BOM的属性与方法

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