Web前端-JavaScript--Bom 定时器 location

BOM

所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法

    都是绑定给了window对象 作为属性跟方法

    因为window经常使用 所以系统默认可以让我们省略 window.(点) 调用
    所以绑定给window对象的属性跟方法 调用时 可以省略 window.(点)

var num=99;
    function show() {
        var num=66;
        console.log(num);
        console.log(window.num);
        
    }

window.open(url,target,param)打开一个新窗口

           url:新窗口的网页地址

            target: _blank  _self

            param:
            window = object.open([URL ][, name ][, features ][, replace]]]])
URL：新窗口的URL地址
name：新窗口的名称，可以为空
featurse：属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。
fullscreen= { yes/no/1/0 } 是否全屏，默认no
channelmode= { yes/no/1/0 } 是否显示频道栏，默认no
toolbar= { yes/no/1/0 } 是否显示工具条，默认no
location= { yes/no/1/0 } 是否显示地址栏，默认no
directories = { yes/no/1/0 } 是否显示转向按钮，默认no
status= { yes/no/1/0 } 是否显示窗口状态条，默认no
menubar= { yes/no/1/0 } 是否显示菜单，默认no
scrollbars= { yes/no/1/0 } 是否显示滚动条，默认yes
resizable= { yes/no/1/0 } 是否窗口可调整大小，默认no
width=number 窗口宽度（像素单位）
height=number 窗口高度（像素单位）
top=number 窗口离屏幕顶部距离（像素单位）
left=number 窗口离屏幕左边距离（像素单位）

   var newWindow;

    btn.onclick=function () {
//        window.open("http://www.baidu.com")
//        window.open("http://www.baidu.com","_self")
       newWindow= window.open("http://www.baidu.com","_blank","width=500,height=400,fullscreen=no")
//        newWindow.moveTo(200,200) //打开窗口的同时  移动才可以
    }
//    移动
    btn1.onclick=function () {
        newWindow.moveTo(200,200); //在这不生效

    }
    btn2.onclick=function () {
//        指定窗口对象 调用关闭时 才能关闭窗口

//        newWindow.close();


    }
    btn3.onclick=function () {
        //如果要想关闭当前页面 那么window.close是不生效的
//        window.close();

    }

 定时器

循环执行的定时器:
    window.setInterval(回调函数,间隔时间(单位毫秒))
        每次间隔指定时间  持续执行  直到手动清除定时器为止

    清除定时器:
        clearInterval(定时器方法的返回值那个数字)

        没调用一次setInterval()就会返回一个数字
        按照调用次数累加

执行一次的定时器:
    window.setTimeout(回调函数,延迟事件(单位毫秒))
        延迟指定时间 执行一次定时器代码 然后结束


        清除定时器
           clearTimeout(定时器返回值)

 var btnArr=document.getElementsByTagName("button");
    var timer;
    btnArr[0].onclick=function () {
//        console.log("炸弹开始爆炸!");
       /*timer= setInterval(function () {
            console.error("嘭!!炸!!");
        },1000)*/
        
//        console.log(timer);
        console.log("炸弹还有5秒到达战场!");
       timer= setTimeout(function () {
            console.error("炸弹爆炸了!!!!")
        },5000)
        
        
    }
    btnArr[1].onclick=function () {
//        clearInterval(timer)
//        clearInterval(timer)
        clearTimeout(timer)
        console.log("炸弹成功拆除!!!");
        
    }

location

location对象:
是专门操作地址栏的一个对象

url:统一资源标识符

//    console.log(window.location);
    /*console.log("href:"+location.href);
    console.log("host:"+location.host);
    console.log("hostname:"+location.hostname);
    console.log("pathname:"+location.pathname);
    console.log("protocol:"+location.protocol);
    console.log("search:"+location.search);*/

 把当前页面的地址栏直接替换成  新地址  (跳转的功能)

location.href="http://www.baidu.com"
//    location.href="http://www.baidu.com?username=mingzhao&password=123456"

location.assign("地址")  跳转后 会把当前跳转前页面记录到历史记录中 (回退可以回退到)
location.replace("地址") 跳转后 不会吧当前跳转前页面记录到历史记录中 (回退中找不到跳转前页面)

    location.assign("http://www.baidu.com")

//    location.replace("http://www.baidu.com")

一键切换无痕浏览模式
//    在页面的最上面 声明一个变量
    var boo=false; //表示有痕浏览

    function tiaozhuan(boo,url) {
        if(boo){
            location.assign(url)
        }else{
            location.replace(url)
        }
        
    }

页面刷新 尽量避免使用
location.reload();

navigator

检测页面在什么浏览器加载

    console.log("appVersion:"+navigator.appVersion);
    console.log("platform:"+navigator.platform);
    console.log("userAgent:"+navigator.userAgent);

history

history.back(); 后退页面

history.forward()  前进页面

history.go(-1); //回退一个页面 
 history.go(0);刷新页面 
  history.go(-1);后退页面