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>