6.2window对象及常用方法

浅浅的花香味﹌ 2023-09-27 13:46 133阅读 0赞

#### window对象及常用方法 ####

**什么是window对象**

Window 对象描述

Window 对象简单理解就是把浏览器抽象成一个对象,它表示一个浏览器窗口或一个框架。在客户端 JavaScript中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写[document][]，而不必写 window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写alert()，而不必写 Window.alert()。

除了上面列出的属性和方法，Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。Window 对象的 window 属性和 [self 属性][self]引用的都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。除了这两个属性之外，parent 属性、top 属性以及frame\[\] 数组都引用了与当前 Window 对象相关的其他 Window 对象。

**Window 对象属性**

![6c50b81821ffb2b0c255587d19b7658c.png][]

**Window 对象方法**

![dc65d75f0eda810cfd447902022d8d6f.png][]

Window 三种弹窗方式

![ec0ba0c9fdb228497d8bd35af4a9df63.png][]

![fe583628302fb7e781eed3594beaf036.png][]

![32b56bd60890ae28602fa0412f121247.png][]

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <script>
                            function fun1(){
                                    /*
                                     * 如果是使用window对象调用的方法和访问的属性 那么window对象都可以省略不写
                                     * 
                                     * */
                                    window.alert("你好呀");//普通信息提示框
                                    
                                    var con =window.confirm("确定要删除***女友吗?");// 确认框
                                    console.log(con);
                                    
                                    var message =window.prompt("请输入3号女友的名字","例如:小刚");// 信息输入框
                                    console.log(message)
                            }
                            
                    </script>
            </head>
            <body>
                    <input type="button" value="测试按钮"  onclick="fun1()"/>
            </body>
    </html>

![28f0e77284d864948cbf677b2bf9d048.gif][]

![5183ef97dbf2900cd06c8d566954da88.gif][]

定时器的使用

> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var intervalIDS =new Array(); // \[1,2,3 \] // 循环执行的定时器任务 function startInterval()\{ // 2 var intervalID = window.setInterval( function()\{ var today =new Date(); var hours=today.getHours(); var minutes=today.getMinutes(); var seconds =today.getSeconds(); var str = hours+"点"+minutes+"分"+seconds+"秒"; var ta =document.getElementById("timeArea"); ta.value =str; \}, 1000 ); intervalIDS.push(intervalID); \} function stopInterval()\{ while(intervalIDS.length >0)\{ window.clearInterval(intervalIDS.shift()); \} \} var timeoutIDS =new Array(); // 执行一次的定时器任务 function startTimeout()\{ var timeoutID =window.setTimeout( function()\{ var today =new Date(); var hours=today.getHours(); var minutes=today.getMinutes(); var seconds =today.getSeconds(); var str = hours+"点"+minutes+"分"+seconds+"秒"; console.log(str) \}, 5000 ); timeoutIDS.push(timeoutID); \} function stopTimeout()\{ while(timeoutIDS.length >0)\{ window.clearTimeout(timeoutIDS.shift()); \} \} </script> </head> <body> <input type="text" id="timeArea" /> <br /> <input type="button" value="开始Interval" οnclick="startInterval()" /> <input type="button" value="结束Interval" οnclick="stopInterval()" /> <input type="button" value="开始timeout" οnclick="startTimeout()" /> <input type="button" value="结束timeout" οnclick="stopTimeout()" /> </body> </html>  
>   
>   
>

open和close方法

> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function fun1()\{ window.open(" [https://www.baidu.com][https_www.baidu.com]") \} function fun2()\{ window.close(); \} </script> </head> <body> <input type="button" value="打开百度" οnclick="fun1()" /> <input type="button" value="关闭页面" οnclick="fun2()" /> </body> </html>  
>   
>   
>

[document]: https://www.w3school.com.cn/jsref/dom_obj_document.asp
[self]: https://www.w3school.com.cn/jsref/prop_win_self.asp
[6c50b81821ffb2b0c255587d19b7658c.png]: https://img-blog.csdnimg.cn/img_convert/6c50b81821ffb2b0c255587d19b7658c.png
[dc65d75f0eda810cfd447902022d8d6f.png]: https://img-blog.csdnimg.cn/img_convert/dc65d75f0eda810cfd447902022d8d6f.png
[ec0ba0c9fdb228497d8bd35af4a9df63.png]: https://img-blog.csdnimg.cn/img_convert/ec0ba0c9fdb228497d8bd35af4a9df63.png
[fe583628302fb7e781eed3594beaf036.png]: https://img-blog.csdnimg.cn/img_convert/fe583628302fb7e781eed3594beaf036.png
[32b56bd60890ae28602fa0412f121247.png]: https://img-blog.csdnimg.cn/img_convert/32b56bd60890ae28602fa0412f121247.png
[28f0e77284d864948cbf677b2bf9d048.gif]: https://img-blog.csdnimg.cn/img_convert/28f0e77284d864948cbf677b2bf9d048.gif
[5183ef97dbf2900cd06c8d566954da88.gif]: https://img-blog.csdnimg.cn/img_convert/5183ef97dbf2900cd06c8d566954da88.gif
[https_www.baidu.com]: https://www.baidu.com