web前端學習（四）JavaScript學習筆記部分（8）-- JavaScript 瀏覽器對象
阿新 • • 發佈：2018-12-09
如何 ann let 窗口 wid int timeout utf 前端
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>
區別：第一個方法是一只調用函數，第二種方法是一直自己調用自己
3、History對象
4、Location對象
5、Screen對象
web前端學習（四）JavaScript學習筆記部分（8）-- JavaScript 瀏覽器對象