三十四.BOM

1.window

window是浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过Javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象(全局对象)。

var age =15;
//声明一个全局变量
window.name="chengchao";
//相当于var name = "chengchao"

2.Window对象的方法

window.alert()
window.confirm(“msg”)

 <div>
        <span id="mi">小米5</span>
        <button id="btn">删除</button>
    </div>

        var mi = document.getElementById("mi");
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            var result = window.confirm("你确定删除吗");
            if (result) {
                mi.parentNode.removeChild(mi);
            }
        }

window.prompt(“text,defaultText”)

var test = window.prompt("请输入","hello world");
        console.log(test)

3.定时器

超时调用-setTimeout()

 setTimeout(function(){
            console.log("hello world")
        },2000)

间歇调用-setInterval()

 setInterval(function(){
            console.log("1")
        },1000)

4.清除定时器

clearInterval()

<button id="btn">停止定时器</button>

 /* 设置定时器的时候,会在window下挂载一个属性 */
        var btn =  document.getElementById("btn");
        var temp = setInterval(function(){
            console.log("2")
        },1000)
        btn.onclick =  function(){
            clearInterval(temp);
        }

5.递归

函数调用函数自身,就叫递归

 function show(){
            setTimeout(function(){
                console.log(1) 
                show();
            },1000)
        }
        show()

6.location

location.href是一个跳转函数
 <button id="btn">跳转到百度</button>

        var btn = document.getElementById("btn");
        btn.onclick =  function(){
           console.log(location.port)
        }

7.history

能够实现返回上一步

02.html

<p>02</p>
    <a href="02history.back.html">03</a>

0.2history.html

<p>03</p>
    <button id="btn"> btn</button>

  var btn =document.getElementById("btn");
        btn.onclick=function(){
            history.back();
        }

8.screen与navigator方法

screen

        // 获取客户端关于屏幕的信息
        var screenWidth =  window.screen.availWidth;
         //获取可视区域的width
        var viewWidth = document.body.clientWidth;
        console.log(screenWidth)
        console.log(viewWidth)

navigator

console.log(navigator.userAgent)

pc

ipad

mobile

//检测浏览器类型
        if(/Android|iphone|webOS/i.test(navigator.userAgent)){
            location.href="mobile.html"
        }else if(/ipad/i.test(navigator.userAgent)){
            location.href="pad.html"
        }