JS BOM之window对象

BOM(browser object model) 浏览器对象模型。

BOM对象有：window navigator screen history location document event.

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

所有的全局变量和全局方法都被归在window对象上。

<script>

    var age=15; //全局变量--脚本的任何一个地方都能调用的变量-->window.age=15
    function sayAge(){
        alert("我"+age);
    }
    //声明一个全局变量
    window.username="marry";
    //声明一个全局方法
    window.sayName=function(){
        alert("我是"+this.username);
    }
    sayAge();
    window.sayName();
</script>

window.alert();

window.confirm("message");显示一个带有指定消息和OK及取消按钮的对话框。返回值：点确定返回true，点取消返回false。

    //confirm()
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        //弹出确认对话框
        var result=window.confirm("您确定要删除吗？");
        if(result){
            document.getElementById("box").style.display="none";
        }
    }

window.prompt("text,defaultText");

参数说明：

text：要在对话框中显示的纯文本（而不是HTML格式的文本）
defaultText:默认的输入文本。

返回值：如果用户单击提示框的取消按钮，则返回null。如果用户单击确认按钮，则返回输入字段当前显示的文本。

var message=prompt("请输入您的星座","天秤座");
console.log(message);

window.open(pageURL,name,parameters);打开一个新的浏览器窗口或查找一个已命名的窗口。

参数说明：

pageURL:子窗口路径
name:子窗口句柄(name声名了新窗口的名称，方便后期通过name对子窗口进行引用)
parameters:窗口参数(各参数用逗号分隔)

width：窗口宽度 height：窗口高度 left：窗口X轴坐标 top：窗口Y轴坐标

toolbar:是否显示浏览器的工具栏 menubar:是否显示菜单栏 scrollbars:是否显示滚动条

location:是否显示地址字段 status:是否添加状态栏。

window.close():

 window.onload=function(){
        window.open("newwindow.html","newwindow","width=400,height=200,left=0,top=0,toobar=no,menubar=no,scrollbars=no,status=no");
        var quit=document.getElementById("quit");
        //点击关闭当前窗口
        quit.onclick=function(){
            window.close();
        }

window对象方法--定时器：

超时调用
间歇调用

JS是单线程语言，单线程就是所执行的代码必须按照顺序。

超时调用：setTimeout(code,milisec) 在指定的毫秒数后调用函数或计算表达式。

参数说明：

code：要调用的函数或要执行的javaScript代码串
milisec：在执行代码前需要等待的毫秒数。

/*setTimeout("alert('hello')",1000);//在一秒钟之后执行，不推荐*/

    //匿名函数
    setTimeout(function(){
        alert("hello");
    },2000)

    //自定义函数
    var fnCall=function(){
        alert("world");
    }
    setTimeout(fnCall,5000);

setTimeout方法返回一个ID值，通过它取消超时调用。

clearTimeout(id_of_settimeout); 取消由setTimeout()方法设置的timeout()方法设置的timeout.

参数说明：id_of_settimeout：由setTimeout()返回的ID值，该值标识要取消的延迟执行代码块。

//匿名函数
    var timeout1=setTimeout(function(){
        alert("hello");
    },2000)
    clearTimeout(timeout1);

间歇调用：

setInterval(code,milisec) :每隔指定的时间执行一次代码。

参数说明：

code：要调用的函数或要执行的javaScript代码串
milisec：周期性执行或调用code之间的时间间隔，以毫秒计。

清除间歇调用：clearInterval(id_of_setinterval) 取消由setInterval()返回的ID值。

参数说明：id_of_setinterval由setInterval()返回的ID值。

 var intervalId=setInterval(function () {
        console.log("您好");
    },1000)
    //10秒之后停止
    setTimeout(function(){
        clearInterval(intervalId);
    },10000);

 //间歇调用：
    var num= 1,max=10,timer=null;
    //每隔1秒钟num递增一次，直到num的值等于max清除
    timer=setInterval(function () {
        console.log(num);
        num++;
        if(num>max){
            clearInterval(timer);

        }

    },1000)

超时调用的setTimeout()只执行code一次，如果要多次调用，可以让code自身再次调用setTimeout().

//超时调用实现：
    var num= 1,max=10,timer=null;
    function inCrementNum(){
        console.log(num);
        num++;
        if(num<=max){
            setTimeout(inCrementNum,1000);
        }else{
            clearTimeout(timer);
        }
    }
    timer=setTimeout(inCrementNum,1000);

猜你喜欢