1.window对象
1.1 window对象
window对象是BOM的核心、window对象指当前的浏览器窗口
所有JavaScript全局对象 、函数以及变量均自动成为window对象的成员
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM的document也是window对象属性之一
1.2 window.innerHeight 浏览器窗口的内部高度
window.innerWidth 浏览器窗口的内部宽度
Window.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <button id="btn" onclick="btnClicked()">按钮</button><br /> 9 <script> 10 document.write("宽度："+window.innerWidth+"，高度："+window.innerHeight); 11 12 function btnClicked(){ 13 window.open("index.html","windowname","height=200,width=200,top=100,left=100,toolbar=no,menubar=no");//打开页面设置各属性 14 window.close();//关闭页面 15 } 16 </script> 17 </body> 18 </html>
2.计时器
2.1 计时事件
通过使用JavaScript，我们可以做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，称之为计时事件。
2.2 计时方法
1>setInterval() 间隔指定的毫秒数不停的执行指定的代码
clearInterval() 方法用于停止setInterval()方法执行的函数代码
2>setTimeout() 暂停指定的毫秒数后执行指定的代码
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码
JiShiQi.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <p id="ptime"></p> 9 <button id="btn" onclick="stopTime()">stopTime()</button><br /> 10 <button id="btn" onclick="myWin()">myWin()</button><br /> 11 <button id="btn" onclick="myWinXh()">myWinXh()</button><br /> 12 <button id="btn" onclick="stopWin()">stopWin()</button><br /> 13 <script> 14 var mytime=setInterval(function(){ //不断的执行，1秒刷新 15 getTime() 16 },1000); 17 function getTime(){ 18 var d=new Date(); 19 var t=d.toLocaleTimeString(); 20 document.getElementById("ptime").innerHTML=t; 21 } 22 function stopTime(){ //停止执行 23 clearInterval(mytime); 24 } 25 26 27 var win; 28 function myWin(){ 29 win=setTimeout(function(){ //指定3秒后弹出 30 alert("hello"); 31 },3000); 32 } 33 34 var winXh; 35 function myWinXh(){ 36 alert("hello"); 37 win=setTimeout(function(){ //指定3秒后循环弹出 38 myWinXh();//自己调用自己循环 39 },3000); 40 } 41 42 function stopWin(){ //终止win弹出 43 clearTimeout(win); 44 } 45 46 </script> 47 </body> 48 </html>
3.History对象
3.1 History对象
window.history对象包含浏览器的历史(url)的集合
3.2 History方法
history.back() 与在浏览器点击后退按钮相同
history.firward() 与在浏览器点击向前按钮相同
history.go() 进入历史中的某个页面
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <!--<a href="History.html">跳转到History</a> 9 <button id="btn" onclick="goHistory()">goHistory()</button> 10 <script> 11 function goHistory(){ 12 history.forward(); //前进到下个页面 13 } 14 </script>--> 15 16 17 <a href="History.html">跳转到History</a> 18 </body> 19 </html>
History.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <!-- <button id="btn" onclick="goindex()">goindex()</button> 9 <script> 10 function goindex(){ 11 history.back(); //后退回上一页面 12 } 13 </script> 14 --> 15 16 <br /> 17 <form> 18 <input type="text" id="username" /> 19 </form> 20 <button id="btn" onclick="safe()">登录</button> 21 <script> 22 function safe(){ 23 var name=document.getElementById("username").value; 24 if(name=="hello"){ 25 history.go(-1); //进入前页面,当前页面为0 26 }else{ 27 alert("输入错误"); 28 } 29 } 30 </script> 31 </body> 32 </html>
4.Location对象
4.1 Location对象
window.location对象用于获得当前页面的地址(url)，并把浏览器重定向到新的页面。
4.2 Location对象的属性
location.hostname 返回web主机的域名
location.psthname 返回当前页面的路径和文件名
location.port 返回web主机的端口
location.protocol 返回所使用的web协议(http://或https://)
location.href 属性返回当前页面的URL
location.assign() 方法加载新的文档
Location.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <button id="btn1" onclick="get1()">gethostname</button> 9 <p id="p1"></p> 10 <script> 11 function get1(){ 12 document.getElementById("p1").innerHTML=window.location.hostname; 13 } 14 </script> 15 16 <button id="btn2" onclick="get2()">getpathname</button> 17 <p id="p2"></p> 18 <script> 19 function get2(){ 20 document.getElementById("p2").innerHTML=window.location.pathname; 21 } 22 </script> 23 24 <button id="btn3" onclick="get3()">getport</button> 25 <p id="p3"></p> 26 <script> 27 function get3(){ 28 document.getElementById("p3").innerHTML=window.location.port; 29 } 30 </script> 31 32 <button id="btn4" onclick="get4()">gethref</button> 33 <p id="p4"></p> 34 <script> 35 function get4(){ 36 document.getElementById("p4").innerHTML=window.location.href; 37 } 38 </script> 39 40 <button id="btn5" onclick="get5()">getassign</button> 41 <p id="p5"></p> 42 <script> 43 function get5(){ 44 location.assign("http://www.baidu.com");//方法加载新的文档 45 } 46 </script> 47 48 </body> 49 </html>
5. screen对象
5.1 Screen对象
window.screen对象包含有关用户屏幕的信息
5.2 属性
screen.availWidth 可用的屏幕宽度
screen.availHeight 可用的屏幕高度
screen.Height 屏幕高度
screen.Width 屏幕宽度
Screen.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script> 9 document.write("可用宽度："+screen.availWidth+", 可用高度："+screen.availHeight); 10 document.write("<br />"); 11 document.write("宽度："+screen.width+", 高度："+screen.height); 12 </script> 13 </body> 14 </html>