第十三节:认识BOM

一.BOM

Brower Object Model: 浏览器对象模型 就是和浏览器相关js操作
一般都是 window.xxxx

1.获取浏览器高度

1.无论宽度还是高度 都包含滚动条的宽度
2.这个是浏览器的宽高 ，不是页面

console.log(  window.innerWidth) // 浏览器宽度 
console.log( window.innerHeight )// 浏览器高度,不是页面的高度 

2.获取浏览器相关的一些信息：navigator

console.log( window.navigator);
//appName：Netscape : 网景公司 
//appVersion： 版本号
//platform: "Win32" 系统版本

二.与游览器地址相关

1. 浏览器操作地址有关系的内容

 //  1.window.open("地址") 打开一个页面
 document.getElementById("btn").onclick = function () {
 // window.open("./a.html");
 window.open("http://www.baidu.com");
}

// 2.window.close() 关闭当前页面;
// 注意 关闭页面必须是通过代码打开的页面才能关闭 直接打开的不能关闭
document.getElementById("btn2").onclick = function () {
window.close();
}

三.与游览器事件相关

1.window.onload:等到页面文档和资源加载完毕之后执行,并不是立刻执行

2.onresize : 在浏览器被重置的时候会触发该事件

var html =  document.getElementsByTagName("html")[0];
//    console.log(html);
html.style.fontSize = window.innerWidth/10 + "px";  //动态设置 html根字体大小
window.onresize = function () {
	console.log("浏览器被大小被重置了");
    // 假定 任何宽度都是10rem 动态设置 根字体大小  
var html =  document.getElementsByTagName("html")[0];
//    console.log(html);
html.style.fontSize = window.innerWidth/10 + "px";  //动态设置 html根字体大小
}

3.onscroll ： 当页面滚动的时候会触发 ，浏览器必须能够滚动

window.onscroll = function () {
    console.log("页面滚动了");
 }

4.滚动时候页面被卷掉的距离

window.onscroll = function () {
// 获取被卷掉的高度
console.log(document.documentElement.scrollTop );  // 有文档声明 
console.log(document.body.scrollTop) //没有文档声明 
}

一、如果有文档声明 那么我们通过 document.documentElement来获取;
二、如果没有文档声明 那么我们通过document.body来获取
IE ： 1.如果没有文档声明 两个都可以
2. 如果有文档声明 那么document.documentElement起作用 ，document.body不起作用
safari ： window.pageYoffset 来获取

4 .游览器弹窗

1.弹框 alert；
2.prompt : 会弹出一个输入框
3.confirm 询问框

// 1.弹框 alert；
// alert(123);
// 2.prompt : 会弹出一个输入框 ，如果点击了确定就是输入框里的内容，如果点击了取消就得到一个null的返还
// var str = prompt("请输入内容");
// console.log(str);
// 3.confirm 询问框 ,返还值：如果点击了确定 就返还true ，如果点击了取消就返还false
var res =  confirm("确定么?");
console.log(res);

五.计时器

1.倒计时定时器: 执行一段时间之后执行某一段代码 ，单位是毫秒

setTimeout(function() {
    console.log("定时3秒之后会执行的代码");
 }, 2000);

2…间隔定时器： 指定一段时间 循环执行一段代码

// setInterval会一直在后台执行；
var num = 0;
   setInterval(function(){
       console.log("间隔1秒执行这里的代码");
       // 修改页面的标题
       num++;
       document.title = num;  //修改页面的标题
    }, 1000);

3.停止定时器 :1 定时器的返还值是一个数字 ；2.停止定时器 : clearTimeout(定时器的返还值);

var timer = setTimeout(function(){
    console.log("执行了代码");
}, 3000);
// console.log(timer);
var ele = document.getElementsByClassName("btn")[0];
ele.onclick = function () {
    clearTimeout(timer);  //停止定时器 
}

var timer = setInterval(function(){
   console.log("timer");
}, 2000);
ele.onclick = function () {
    // clearTimeout(timer);  //停止定时器 
    clearInterval(timer);  //停止间隔定时器
}

注意:clearInterval和clearTimeout 可以互相使用

4.倒计时定时器 可以替代 间隔定时器

setInterval(function () {
     console.log(111);
}, 2000);

// 通过倒计时定时器模拟间隔定时器 
function fn() {
   setTimeout(function () {
        console.log("执行了代码");
        fn();
    }, 2000);
}
fn();

5.所有定时器的代码一定会滞后于js代码

setTimeout(() => {
    console.log(111);
}, 0);
console.log(222);
setTimeout(() => {
    console.log(333)
});
console.log(444);

6.定时器里的this问题 : 在定时器里 如果不是箭头语法 ，那么 它的this是指向 window；

        var obj = {
            name: "张三",
            fn: function () {
                console.log("1",this);
                // 通过一个变量来保存外部this值 
                var that = this;
                setTimeout(function () {
                    // console.log("2",obj.name);
                    console.log("2",that.name);
                    // 打印 obj里的name 怎么办？？
                    
                }, 2000);
            }
        }
        obj.fn();