JavaScript中的window物件 (狀態列動態文字例項)
阿新 • • 發佈：2018-11-09
window物件在js中經常會提到, 在具體瞭解之前經常會感覺疑惑,
window到底是個啥, 這篇就是用來介紹window給和我一樣的菜鳥
Window - 瀏覽器物件模型
為什麼說瀏覽器物件呢?
因為window物件它表示瀏覽器窗口或一個框架, 與windows作業系統沒啥關係
window物件是整個JavaScript指令碼執行的頂層物件
所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員。
全域性變數是 window 物件的屬性。
全域性函式是 window 物件的方法。
如果文件包含框架（frame 或 iframe 標籤），瀏覽器會為 HTML 文件建立一個 window 物件，併為每個框架建立一個額外的 window 物件。
甚至 HTML DOM 的 document 也是 window 物件的屬性之一：
window.document.getElementById("header");上下的語句相同
document.getElementById("header");也就是說js書寫時 window關鍵字是可以省略的
Window 物件屬性
| 屬性 | 描述 |
|---|---|
| closed | 返回視窗是否已被關閉。 |
| defaultStatus | 設定或返回視窗狀態列中的預設文字。 |
| document | 對 Document 物件的只讀引用。請參閱 Document 物件。 |
| history | 對 History 物件的只讀引用。請引數 History 物件。 |
| innerheight | 返回視窗的文件顯示區的高度。 |
| innerwidth | 返回視窗的文件顯示區的寬度。 |
| length | 設定或返回視窗中的框架數量。 |
| location | 用於視窗或框架的 Location 物件。請參閱 |
| name | 設定或返回視窗的名稱。 |
| Navigator | 對 Navigator 物件的只讀引用。請引數 Navigator 物件。 |
| opener | 返回對建立此視窗的視窗的引用。 |
| outerheight | 返回視窗的外部高度。 |
| outerwidth | 返回視窗的外部寬度。 |
| pageXOffset | 設定或返回當前頁面相對於視窗顯示區左上角的 X 位置。 |
| pageYOffset | 設定或返回當前頁面相對於視窗顯示區左上角的 Y 位置。 |
| parent | 返回父視窗。 |
| Screen | 對 Screen 物件的只讀引用。請引數 Screen 物件。 |
| self | 返回對當前視窗的引用。等價於 Window 屬性。 |
| status | 設定視窗狀態列的文字。 |
| top | 返回最頂層的先輩視窗。 |
| window | window 屬性等價於 self 屬性，它包含了對視窗自身的引用。 |
|
只讀整數。聲明瞭視窗的左上角在螢幕上的的 x 座標和 y 座標。IE、Safari 和 Opera 支援 screenLeft 和 screenTop，而 Firefox 和 Safari 支援 screenX 和 screenY。 |
Window 物件方法
| 方法 | 描述 |
|---|---|
| alert() | 顯示帶有一段訊息和一個確認按鈕的警告框。 |
| blur() | 把鍵盤焦點從頂層視窗移開。 |
| clearInterval() | 取消由 setInterval() 設定的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法設定的 timeout。 |
| close() | 關閉瀏覽器視窗。 |
| confirm() | 顯示帶有一段訊息以及確認按鈕和取消按鈕的對話方塊。 |
| createPopup() | 建立一個 pop-up 視窗。 |
| focus() | 把鍵盤焦點給予一個視窗。 |
| moveBy() | 可相對視窗的當前座標把它移動指定的畫素。 |
| moveTo() | 把視窗的左上角移動到一個指定的座標。 |
| open() | 開啟一個新的瀏覽器視窗或查詢一個已命名的視窗。 |
| print() | 列印當前視窗的內容。 |
| prompt() | 顯示可提示使用者輸入的對話方塊。 |
| resizeBy() | 按照指定的畫素調整視窗的大小。 |
| resizeTo() | 把視窗的大小調整到指定的寬度和高度。 |
| scrollBy() | 按照指定的畫素值來滾動內容。 |
| scrollTo() | 把內容滾動到指定的座標。 |
| setInterval() | 按照指定的週期（以毫秒計）來呼叫函式或計算表示式。 |
| setTimeout() | 在指定的毫秒數後呼叫函式或計算表示式。 |
status屬性可以改變狀態列文字, 配合定時器我們可以做出一個狀態列的動態文字效果如下:
字依次從右邊向左靠的動態效果,可惜現在的瀏覽器出於空間考慮都砍掉了狀態列, 就是下方的顯示狀態的細條
上程式碼:
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 狀態列的動畫文字 </title>
</head>
<body onload="stack();">
<script type="text/javascript">
// 自定義的狀態文字
var statusText = "自定義的動畫狀態列文字...";
var out = "";
// 動畫間隔時間
var pause = 25;
// 動畫寬度
var animateWidth = 20;
var position = animateWidth;
var i = 0 ;
var stack = function()
{
if (statusText.charAt(i) != " ")
{
out = "";
// 將0到i-1個字元拼成輸出字串
for (var j = 0; j < i; j++)
{
out += statusText.charAt(j);
}
// 增加一定寬度空格
for (j = i; j < position; j++)
{
out += " ";
}
// 將第i個字元新增到輸出字串裡去
out += statusText.charAt(i);
for (j = position; j < animateWidth; j++)
{
out += " ";
}
window.status = out;
// 如果後出來的字緊靠了前面字串
if (position == i)
{
animateWidth++;
position = animateWidth;
// i加1，對應為多出現一個字元
i++;
}
else
{
position--;
}
}
else
{
i++
}
if (i < statusText.length)
{
setTimeout("stack()",pause);
}
}
</script>
</body>
</html>
關於兩個定時器我會在另一篇部落格介紹, 有不明白區別的同學可以看一下哦
有參考W3school內容