web前端學習（四）JavaScript學習筆記部分（8）-- JavaScript 瀏覽器物件
阿新 • • 發佈：2018-12-09
1、window物件
1.1、window物件：
window物件是BOM的核心，window物件指當前的瀏覽器視窗
所有javaScript全域性物件、函式以及變數均自動生成為window物件的成員
全域性變數是window物件的屬性
全域性函式是window物件的方法
甚至HTML DOM的document也是window物件的屬性之一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> window.document.write("hello");/*這個效果和不寫window.是一樣的*/ </script> </body> </html>
1.2、window尺寸
window.onnerHeight - 瀏覽器視窗的內部高度
window.innerWidth - 瀏覽器視窗的內部寬度
備註：這個高度和寬度計算的不包含工具欄和滾動條這一部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> document.write(`高度：`+window.innerHeight+`,寬度：`+window.innerWidth);/*這個效果和不寫window.是一樣的*/ </script> </body></html>
1.3window方法：
window.open() - 開啟新視窗
window.close() - 關閉當前視窗
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn" onclick="btnOnClick()">按鈕</button> <script> function btnOnClick(){ window.open("array1.html","hahaha","width=300,height=300,top=300,left=300,toolbar=yes") /*要開啟的視窗名|視窗命名|屬性設定|toolbar設定屬性如何顯示，谷歌瀏覽器直接沒有toolbar*/ window.close();/*關閉當前視窗*/ } </script> </body> </html>
2、計時器
2.1、計時事件
通過使用JavaScript，我們有能力做到在一個設定的時間間隔之後來執行程式碼，而不是在函式被呼叫後立即執行，我們稱之為計時事件
2.2、計時方法：
1、setInterval() - 間隔指定的毫秒數不停地執行指定的程式碼
clearInterval() - 方法用於停止setInterval()方法執行的函式程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn" onclick="stopTime()">anniu</button> <p id="ptime"></p> <script> var mytime = setInterval(function(){ getTime(); },1000) function getTime(){ var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById("ptime").innerHTML = t; } function stopTime(){ clearInterval(mytime); } </script> </body> </html>
2、setTimeout() - 暫停指定的毫秒數後執行指定的程式碼
clearTimeout() - 方法用於停止執行setTimeout()方法的函式程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn" onclick="myWin()">彈出一次</button> <button id="btn2" onclick="myWin2()">一直彈出</button> <button id="btn3" onclick="stopWin()">停止彈出</button> <script> var win; function myWin(){ win = setTimeout(function(){ alert("hello"); },3000); } function myWin2(){ alert("hello"); win = setTimeout(myWin2,3000); /*方法自己呼叫自己可以一直執行*/ } function stopWin(){ clearInterval(win); } </script> </body> </html>
區別：第一個方法是一隻呼叫函式，第二種方法是一直自己呼叫自己