<html> <head> <title>window对象学习</title> <meta charset="UTF-8"/> <!-- BOM浏览器对象模型:是规范浏览器对js语言的支持(js调用浏览器本身的功能)。 BOM的具体实现是window对象 window对象使用学习: 1、window对象不用new,直接进行使用即可,类似Math的使用方式,window关键字可以省略不写。 2、框体方法 alert:警告框 提示一个警告信息,没有返回 confirm:确认框 提示用户选择一项操作(确定/取消) 点击确定 返回true 点击取消 返回false prompt:提示框, 提示用某个信息的录入或者说收集 点击确定,返回当前用书录入的数据,默认返回空字符串 点击取消,返回null 3、定时和间隔执行方法 setTimeout:指定的时间后执行指定的函数 参数1:函数对象 参数2:时间,单位毫秒。 返回值:返回当前定时器的id setInterval:每间隔指定的时间执行指定的函数 参数1:函数对象 参数2:时间,单位毫秒。 返回值:返回当前间隔器的id clearTimeout:用来停止指定的定时器 参数:定时器的id clearInterval:用来停止指定的间隔器 参数:间隔器的id --> <!--声明js代码域--> <script type="text/javascript"> //框体方法学习: //警告框 function testAlert(){ var a=window.alert("我是警告框"); alert(a); } //确认框 function testConfirm(){ var flag=window.confirm("你确定要删除吗?"); alert(flag); } //提示框 function testPrompt(){ var str=window.prompt("请输入昵称:"); alert(str); } /*----------------------------------------------------------------------------------------------*/ var idi; var ids //定时执行 function testSetTimeout(){ idi=window.setTimeout(function(){ alert("我是定时执行"); },3000); } //间隔执行 function testSetInterval(){ ids=window.setInterval(function(){ alert("我是间隔执行"); },2000); } //停止当前的定时方法 function testClearTimeout(){ window.clearTimeout(idi); } function testClearInterval(){ window.clearInterval(ids); } </script> </head> <body> <h3>window对象学习</h3> <hr /> <input type="button" name="" id="" value="测试警告框" onclick="testAlert();" /> <input type="button" name="" id="" value="测试确认框" onclick="testConfirm()" /> <input type="button" name="" id="" value="测试提示框" onclick="testPrompt()"/> <hr /> <input type="button" name="" id="" value="测试setTimeout--定时执行" onclick="testSetTimeout()"/> <input type="button" name="" id="" value="测试setInterval--间隔执行" onclick="testSetInterval()"/> <input type="button" name="" id="" value="测试clearTimeout--停止指定的定时器" onclick="testClearTimeout()" /> <input type="button" name="" id="" value="测试clearInterval--停止指定的间隔器" onclick="testClearInterval()" /> </body> </html>
部分二:
<html> <head> <title>js的window对象学习2</title> <meta charset="UTF-8"/> <!-- js的window对象学习 1、子窗口方法 window.open(‘子页面的资源(相对路径)‘,‘打卡方式‘,‘配置‘); 示例:window.open(‘son.html‘,‘newwindow‘,‘height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes‘); 注意: 关闭子页面的方法window.close(),但是此方法只能关闭open方法打开的子页面。 2、子页面调用父页面的函数 window.opener.父页面的函数 js的window对象的常用属性 地址栏属性:location window.location.href="新的资源路径(相对路径/URL)" window.location.reload()重新加载页面资源 历史记录属性 window.history.forward() 页面资源前进,历史记录的前进。 window.history.back() 页面资源后退,历史记录后退 window.history.go(index) 跳转到指定的历史记录资源 注意window.history.go(0)相当于刷新。 屏幕属性 window.srceen.width;//获取屏幕的宽度分辨率 window.screen.height;//获取屏幕的高度分辨率 浏览器配置属性 主体面板属性(document) --> <!--声明js代码域--> <script type="text/javascript"> //1、子页面方法 function testOpen(){ window.open(‘son.html‘,‘newwindow‘,‘height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes‘); } //2、子页面调用父页面的函数 function testFather(){ alert("父页面"); } /*----------------------------------------------------------------------------*/ //1、地址栏属性学习--location function testLocation(){ window.location.href="http://www.baidu.com"; } function testLocation2(){ window.location.reload(); } //2、历史记录属性 function testHistory(){ window.history.forward(); } function testHistory2(){ window.history.go(0); } //3、屏幕属性学习 function testScreen(){ var x=window.screen.width; var y=window.screen.height; alert(x+":"+y) } //4、浏览器配置属性 function testNa(){ alert(window.navigator.userAgent); } </script> </head> <body> <h3>js的window对象学习2</h3> <hr /> <input type="button" name="" id="" value="测试open" onclick="testOpen()"/> <hr /> <input type="button" name="" id="" value="测试地址栏属性--location--跳转资源" onclick="testLocation()" /> <input type="button" name="" id="" value="测试地址栏属性--location--重新加载资源" onclick="testLocation2()" /> <br /><br /> <input type="button" name="" id="" value="测试历史记录属性--history-前进" onclick="testHistory();"/> <input type="button" name="" id="" value="测试历史记录属性--history-go" onclick="testHistory2();"/> <br /><br /> <input type="button" name="" id="" value="测试屏幕属性--screen" onclick="testScreen()" /> <input type="button" name="" id="" value="测试浏览器配置属性--navigator" onclick="testNa()" /> </body> </html>
部分一: