摘要：案例每隔毫秒調(diào)用函數(shù)并顯示時(shí)間。當(dāng)點(diǎn)擊按鈕時(shí)，停止時(shí)間代碼如下計(jì)時(shí)器每隔毫秒調(diào)用函數(shù)，并將返回值賦值給計(jì)時(shí)器計(jì)時(shí)器，在載入后延遲指定時(shí)間后去執(zhí)行一次表達(dá)式僅執(zhí)行一次。該值標(biāo)識(shí)要取消的延遲執(zhí)行代碼塊。

本系列將持續(xù)更新Javascript基礎(chǔ)部分的知識(shí)，誰(shuí)都想掌握高端大氣的技術(shù)，但是我覺(jué)得沒(méi)有一個(gè)扎實(shí)的基礎(chǔ)，我認(rèn)為一切高階技術(shù)對(duì)我來(lái)講都是過(guò)眼云煙，要成為一名及格的前端工程師，必須把基礎(chǔ)打扎實(shí)了。我也想展翅高飛，但前提我必須練就一雙會(huì)飛的翅膀。

window對(duì)象是 BOM 的核心，window對(duì)象指當(dāng)前的瀏覽器窗口。

BOM 是什么？ BOM是Browser Object Model的縮寫(xiě)，簡(jiǎn)稱瀏覽器對(duì)象模型。

BOM 提供了獨(dú)立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對(duì)象。

由于BOM主要用于管理窗口與窗口之間的通訊，因此其核心對(duì)象是window。

BOM 由一系列相關(guān)的對(duì)象構(gòu)成，并且每個(gè)對(duì)象都提供了很多方法與屬性。

下圖是windows的一些js操作方法：

在JavaScript中，我們可以在設(shè)定的時(shí)間間隔之后來(lái)執(zhí)行代碼，而不是在函數(shù)被調(diào)用后立即執(zhí)行。

js計(jì)時(shí)器的類型：
1.一次性計(jì)時(shí)器：僅在指定的延遲時(shí)間之后觸發(fā)一次。
2.間隔性觸發(fā)計(jì)時(shí)器：每隔一定的時(shí)間間隔就觸發(fā)一次。

下面著重介紹這些一些js計(jì)時(shí)器的使用技巧：

在執(zhí)行時(shí),從載入頁(yè)面后每隔指定的時(shí)間執(zhí)行一次代碼。

語(yǔ)法:

參數(shù)說(shuō)明：

代碼：要調(diào)用的函數(shù)或要執(zhí)行的代碼串。

交互時(shí)間：周期性執(zhí)行或調(diào)用表達(dá)式之間的時(shí)間間隔，以毫秒計(jì)（1s=1000ms）。

返回值:
一個(gè)可以傳遞給 clearInterval() 從而取消對(duì)"代碼"的周期性執(zhí)行的值。

調(diào)用函數(shù)格式(假設(shè)有一個(gè)clock()函數(shù)):

【案例】我們?cè)O(shè)置一個(gè)計(jì)時(shí)器，每隔100毫秒調(diào)用clock()函數(shù)，并將時(shí)間顯示出來(lái)，代碼如下:

上圖是實(shí)現(xiàn)動(dòng)態(tài)計(jì)時(shí)器的案例，可以參考參考。

clearInterval() 方法可取消由 setInterval() 設(shè)置的交互時(shí)間。

語(yǔ)法：

參數(shù)說(shuō)明:
id_of_setInterval：由 setInterval() 返回的 ID 值。

【案例】每隔 100 毫秒調(diào)用 clock() 函數(shù),并顯示時(shí)間。當(dāng)點(diǎn)擊按鈕時(shí)，停止時(shí)間,代碼如下:

setTimeout()計(jì)時(shí)器，在載入后延遲指定時(shí)間后,去執(zhí)行一次表達(dá)式,僅執(zhí)行一次。

語(yǔ)法:

參數(shù)說(shuō)明：

代碼：要調(diào)用的函數(shù)或要執(zhí)行的代碼串。

延時(shí)時(shí)間：在執(zhí)行代碼前需等待的時(shí)間，以毫秒為單位（1s=1000ms)。

【案例】當(dāng)我們打開(kāi)網(wǎng)頁(yè)3秒后，在彈出一個(gè)提示框，代碼如下:

【案例】當(dāng)按鈕start被點(diǎn)擊時(shí)，setTimeout()調(diào)用函數(shù)，在5秒后彈出一個(gè)提示框：

要?jiǎng)?chuàng)建一個(gè)運(yùn)行于無(wú)窮循環(huán)中的計(jì)數(shù)器，我們需要編寫(xiě)一個(gè)函數(shù)來(lái)調(diào)用其自身。

【案例】在下面的代碼，當(dāng)按鈕被點(diǎn)擊后，輸入域便從0開(kāi)始計(jì)數(shù)：

setTimeout()和clearTimeout()一起使用，停止計(jì)時(shí)器。

語(yǔ)法:

參數(shù)說(shuō)明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標(biāo)識(shí)要取消的延遲執(zhí)行代碼塊。

【案例】下面的例子和上節(jié)的無(wú)窮循環(huán)的例子相似。唯一不同是，現(xiàn)在我們添加了一個(gè) "Stop" 按鈕來(lái)停止這個(gè)計(jì)數(shù)器：

上圖實(shí)現(xiàn)：JS利用計(jì)時(shí)器開(kāi)啟或關(guān)閉自動(dòng)計(jì)時(shí)器。

這里其實(shí)就是講一些記住頁(yè)面操作的方法，比如跳轉(zhuǎn)返回，histor對(duì)象等等

history對(duì)象記錄了用戶曾經(jīng)瀏覽過(guò)的頁(yè)面(URL)，并可以實(shí)現(xiàn)瀏覽器前進(jìn)與后退相似導(dǎo)航的功能。

注意：history對(duì)象是從窗口被打開(kāi)的那一刻開(kāi)始記錄的，每個(gè)瀏覽器窗口、每個(gè)標(biāo)簽頁(yè)乃至每個(gè)框架，都有自己的history對(duì)象與特定的window對(duì)象關(guān)聯(lián)。
語(yǔ)法：

注意：window可以省略。

History 對(duì)象屬性：

1.length：返回瀏覽器歷史列表中的url數(shù)量。

History 對(duì)象方法：

1.back()：加載history列表中的前一個(gè)url。


2.forward()：加載history列表中的下一個(gè)url。


3.go()：去到history列表中的一個(gè)具體的url。

使用length屬性，當(dāng)前窗口的瀏覽歷史總長(zhǎng)度，代碼如下：

location用于獲取或設(shè)置窗體的URL，并且可以用于解析URL。

語(yǔ)法：

上圖為：location對(duì)象屬性圖示。

根據(jù)上圖可以看到一些location對(duì)象的屬性：

1.hash：設(shè)置或返回從井號(hào)（#）開(kāi)始的URL錨點(diǎn)。
2.host：設(shè)置或返回當(dāng)前主機(jī)名或者當(dāng)前URL的端口號(hào)。
3.hostname：設(shè)置或返回當(dāng)前URL的主機(jī)名。
4.href：設(shè)置或返回完整的URL。
5.pathname：設(shè)置或返回當(dāng)前URL的路徑部分。
6.port：設(shè)置或返回當(dāng)前URL的端口號(hào)。
7.protocol：設(shè)置或返回當(dāng)前URL的協(xié)議。
8.search：設(shè)置或返回當(dāng)前URL從問(wèn)號(hào)（？）開(kāi)始的URL部分（查詢部分）

location的一些對(duì)象方法如下：

1.assign()：加載新文檔。
2.reload()：重新加載當(dāng)前文檔。
3.replace()：用新文檔代替舊文檔。    

Navigator 對(duì)象包含有關(guān)瀏覽器的信息，通常用于檢測(cè)瀏覽器與操作系統(tǒng)的版本。

上圖為Navigate的對(duì)象屬性:
查看瀏覽器的名稱和版本，代碼如下：

screen對(duì)象用于獲取用戶的屏幕信息。

語(yǔ)法：

上圖為：screen的對(duì)象屬性

window.screen 對(duì)象包含有關(guān)用戶屏幕的信息。

screen.height 返回屏幕分辨率的高

screen.width 返回屏幕分辨率的寬

注意:

1.window.screen 對(duì)象的單位以像素計(jì)。
2.window.screen 對(duì)象在編寫(xiě)時(shí)可以不使用 window 這個(gè)前綴。

【案例】我們來(lái)獲取屏幕的高和寬，代碼如下:

screen.availWidth 屬性返回訪問(wèn)者屏幕的寬度，以像素計(jì)，減去界面特性，比如任務(wù)欄。

screen.availHeight 屬性返回訪問(wèn)者屏幕的高度，以像素計(jì)，減去界面特性，比如任務(wù)欄。

注意：不同系統(tǒng)的任務(wù)欄默認(rèn)高度不一樣，及任務(wù)欄的位置可在屏幕上下左右任何位置，所以有可能可用寬度和高度不一樣。

【案例】我們來(lái)獲取屏幕的可用高和寬度，代碼如下：

注意:根據(jù)屏幕的不同顯示值不同。

對(duì)于菜鳥(niǎo)來(lái)講可以這么理解：Window 對(duì)象表示瀏覽器中打開(kāi)的窗口。

瀏覽器對(duì)象模型 (BOM) 使 JavaScript 有能力與瀏覽器（window）“對(duì)話”。

全局的window對(duì)象：JavaScript中的任何一個(gè)全局函數(shù)或變量都是window的屬性。
全局變量是window對(duì)象的屬性。
全局函數(shù)是window對(duì)象的方法。
甚至HTML-DOM的document也是window對(duì)象的屬性之一。

Window 尺寸：有三種方法能夠確定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動(dòng)條）。

對(duì)于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 瀏覽器窗口的內(nèi)部高度
window.innerWidth - 瀏覽器窗口的內(nèi)部寬度

對(duì)于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth

document.body.clientHeight
document.body.clientWidth

// window與self對(duì)象：self對(duì)象與window對(duì)象完全相同，self通常用于確認(rèn)就是在當(dāng)前的窗體內(nèi)。

注意：window、self、window.self三者是等價(jià)的。

雖然總結(jié)有點(diǎn)亂，但是還是值得再看一遍的，我是太困了，總結(jié)亂寫(xiě)了。。。