BOM（Browser Object Model）简介

BOM

全称：
Browser Object Model
浏览器 对象 模型

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

var F68 = "12345";
console.log(F68);//12345
function f68() {
 console.log("6789");}
var f69 = function () {
 console.log("123");};
console.log(window.F68);//12345
window.f68();//6789
window.f69();//123

var i=0;
delete window.i;
console.log(window.i);//0
window.f68="LSY"
delete window.f68;
console.log(window.f68);//undefined

可以删除window.属性创建的内容;

无法删除var声明的变量;

window的属性与方法

检查视口，窗口大小

不支持低版本(IE8以下的)

console.log(“浏览器距离屏幕X轴的尺寸:”,window.screenX);

console.log(“浏览器距离屏幕Y轴的尺寸:”,window.screenY);

不支持ireFox(火狐)

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);

确认框

let info=window.confirm("是否继续通关！");
console.log(info);
if(info){
  console.log("下一关加载中...");
}else{
  console.log("游戏结束！！!");
}

文本输入框

let inputContent=window.prompt("请输入您的手机号：");
console.log(typeof inputContent, inputContent);
let inputContent = window.prompt("请输入您的手机号：");
let re = /^[1][3-9][0-9]{9}$/;
let F68 = re.test(inputContent);
if (F68) {
 window.alert("输入正确！！！");
} else {
 window.alert("输入错误！！！请输入正确的11位手机号码：");
}

输入的内容在页面上显示

document.write(inputContent);

let time = setInterval(f68, 1000); //返回创建的时间函数
//setInterval 创建时间函数 ，
//1000,毫秒值：1s=1000ms
let i = 5;
function f68() {
 if (i > 0) {
  console.log(i--);
 } else {
  console.log("end");
  clearInterval(time);
  //停止时间函数
  //书写格式clearInterval（时间函数名）
 }
}

在时间函数里添加实参

方式一：setInterval（"函数名（实参1，实参2...）" ，调用时间）
let time2 = setInterval("f68(5)", 1000);
// 方式二： setInterval（函数名，调用时间，实参1，实参2）
// let time2 = setInterval(f68, 1000,5);
let j = 5;
function f68(a) {
 if (a + j> 0) {
  console.log(a + j--);
 } else {
  console.log("end");
  clearInterval(time2);
 }
}

倒计时（超时函数）setTimeout

function f69(){
console.log("您已超时了");
}
setTimeout(f69,3000)

打开一个新的页面

 参一：目标页面地址
 参二：打开方式（_blank,_self）_self 当前页面，_blank新页面
 参三：设置新窗口尺寸
 参四：是否替换当前的历史记录（true，false）
window.open("./text02.html", "_blank", "width=300,height=300", "true");

时间函数（非常重要）

功能:在规定的时间，重复执行代码块。

书写格式： setInterval （函数名，调用时间）

1、window 窗口

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

所有全局变量都是window的属性(只能使用var声明的变量);

所有全局函数都是window的方法;

2、navigator 获取浏览器的信息

// 打印当前浏览器的名字

console.log(“当前浏览器的名字：”,navigator.appName);

console.log(“当前浏览器的版本：”,navigator.appVersion);

console.log(“当前浏览器的语言：”,navigator.language);

3、location 地址栏（）表单事件获取用户提交信息

console.log(“获取？以后的内容：”,location.search);

console.log(“获取端口号：”,location.port);

console.log(“获取地址栏内容：”,location.href);

location.replace();//用什么代替当前页面

括号里填用来代替的页面

4、history 历史记录

history.go(数值)

数值为负，就是之前的页面；

例如：-1就是前一个页面，-2就是前2个页面，以此类推；

数值为0，就是当前页面，即刷新；

数值为正数，就是之后的页面。（点击之后的页面，即在历史记录）

例如：1就是后一个页面，2就是后2个页面，以此类推。

setTimeout(f68,5000)
function f68(){
  history.go(-1);
}
火狐有效

function f68(){
  location.replace("./text01.html")
}
function f68(){
  location.assign("./text01.html")
}

5、screen 屏幕 访问用户屏幕的宽度跟高度

console.log(“获取屏幕的宽度：”,screen.availWidth);

console.log(“获取屏幕的高度：”,screen.availHeight);