BOM技术点

1、Window:

每打开一个页面就会创建一个window对象(全局对象)

所有全局变量都是window的属性(只适用于var声明的变量)

所有全局函数都是window的方法(只适用于字面量声明的函数)

`let i = 999;`

`console.log(i);`

`var j = 1;`

`console.log(window.j);`

`var f69 = function f68(){`

console.log("hello");

`}`

`window.f69();`

<u>可以删除window.属性 创建的内容</u>

<u>无法删除var 声明的全局变量</u>

`var i = 0;`

`delete window.i;`

`console.log(window.i);`

`window.j = "hello";`

`delete window.j;`

`console.log(window.j);`

## window的属性:

### 距离屏幕的尺寸

window.screenX/y:不支持低版本(IE8)

console.log("浏览器距离屏幕x轴的尺寸",window.screenX);

console.log("浏览器距离屏幕y轴的尺寸",window.screenY);

兼容性问题,不支持FireFox(火狐)

console.log("浏览器距离屏幕左侧的尺寸",window.screenLeft);

console.log("浏览器距离屏幕顶部的尺寸",window.screenTop);

### 获取浏览器的宽高

inner不包括(检查器、滚动条、地址栏等)即视口

console.log("浏览器inner的宽度",window.innerWidth);

console.log("浏览器inner的高度",window.innerHeight);

outer会包括(检查器、滚动条、地址栏等)

console.log("浏览器outer的宽度",window.outerWidth);

console.log("浏览器outer的高度",window.outerHeight);

### 获取滚动条的偏移量

console.log("滚动条y轴的偏移量",window.pageYOffset);

console.log("滚动条x轴的偏移量",window.pageXOffset);

## window的方法:

### .alert警示框

let info = window.alert("奥利给!");

console.log(info); //un

### .confirm确认框

let info = window.confirm("是否继续通关!");

console.log(info); //确定是true,否是false

if(info){

window.alert("下一关,加载中。。。");

}else{

window.alert("游戏结束!");

}

### .prompt文本输入框

let inputinfo = window.prompt("请输入您的手机号:");

console.log(typeof inputinfo,inputinfo);

`输入正确的手机号:`

`let inputinfo = window.prompt("请输入您的手机号:");`

`// let re=/^1[3-9][0-9]{9}$/;`

`// let result =re.test(inputinfo);`

`if(/^[1][3-9][0-9]{9}$/.test(inputinfo)){`

`window.alert("输入正确!");`

`}else{`

`window.alert("输入错误!");`

`}`

### 把输入的内容在页面上显示:

// document.write(inputinfo);

### 时间函数setInterval [重要]

功能:在设定的时间,重复执行代码块

书写格式:setInterval(函数名,调用时间); 注:调用时间单位为毫秒

//在时间函数里添加实参

//方式1:setInterval('函数名(实参1,实参2)',1000);

//方式2:setInterval(函数名, 1000,实参1,实参2);

let timer = setInterval('f68(5)', 1000); //返回创建的时间函数

let timer = setInterval(f68, 1000,5);

let i = 5;

function f68(a) {

if (i > 0) {

console.log(a + i--);

} else {

console.log("success");

//终止时间函数:格式 clearInterval(时间函数名);

clearInterval(timer);

}

}

### 倒计时(超时函数)setTimeout

function f69() {

window.alert("您已经超时了");

}

setTimeout(f69,3000);

### 打开一个新的页面.open()

/**

* 参1:目标页面地址

* 参2:打开方式(_blank,_self)

* 参3:设置新窗口尺寸

* 参4:是否替换当前的历史记录,(true)

*/

window.open("./text.html","_blank","width=300,height=300","true");

## 2、navigator 获取浏览器的信息

// console.log("浏览器的名字:",navigator.appName);

// console.log("浏览器的版本:",navigator.appVersion);

// console.log("浏览器的语言:",navigator.language);

## 3、location 获取用户提交信息

location(表单事件获取用户提交信息)

// console.log("获取?以后的内容:",location.search);

// console.log("获取端口号:",location.port);

// console.log("获取地址栏内容:",location.href);

### replace();

// location.replace("./text.html"); //没有返回功能,替换成一个新的页面

### assign();

// location.assign("./text.html"); //有返回功能

## 4、history:历史记录

history.go(数值);

* 数值为负值,就是之前的页面。 例如:-1就是前1个页面,-2就是前2个页面,以此类推

* 数值为0就是当前页面,即刷新

* 数值为正值,就是之后的页面(点击之后的页面,即在历史记录)。 例如:1就是后1个页面,2就是后2个页面,以此类推

## 5、screen

// console.log("获取屏幕宽度:",screen.availWidth);

// console.log("获取屏幕高度:",screen.availHeight);

// 6、document(很多技术点,DOM)

## 6、document(很多技术点,DOM讲解)

原文地址:https://www.cnblogs.com/liqiang95950523/p/13725744.html