Day2-Window物件
Day2-Window物件
window物件的常用屬性
screen：有關客戶端的螢幕和顯示效能的資訊。
history：有關客戶訪問過的url的資訊
location：有關當前url的資訊
window物件的常用方法
prompt：現實可提示使用者輸入的對話方塊
例：prompt("你是大豬蹄子嗎？","是的");
效果：
其輸入框內容可通過宣告變數接收。
var tip = prompt("你是大豬蹄子嗎？","是的");
document.write(tip);tip為文字框輸入內容。
alert:顯示帶有一個提示資訊和一個確定按鈕的警示框
例：
alert("男人都是大豬蹄子！！！");效果：
alert中的內容可以是變數，也可以是常量
confirm:顯示一個帶有提示資訊、確定和取消按鈕的對話方塊
例：confirm("你確定你是大豬蹄子嗎？");
效果：
當點選“確定”時，返回Ture值，當點選“取消”時，返回False。
var bool = confirm("你確定你是大豬蹄子嗎？");close：關閉當前頁面
close();可直接定義，關閉當前頁面。加在JS中可能會被瀏覽器攔截；
open：開啟一個頁面
open("要開啟的url地址","網頁名稱","視窗特徵" 可直接定義。開啟一個新的頁面。
setTimeout：在指定毫秒後呼叫函式或計算表示式
例：setTimeout(close,5000); //在5000毫秒(即5秒)後，執行close方法
setInterval：按照指定的週期(以毫秒計)來呼叫函式或表示式
例：
setInterval(function(){
if(count == 0){
document.write("再見了，大豬蹄子！！！");
}else{
document.write("<br />" clearInterval(定時器)：清除已定義的定時器
例：
var time = setInterval(open(),1000);
clearInterval(time); //清除上面定義的time定時器window物件的常用事件
onload: 當頁面載入到onload時，執行一個方法
例：
JS程式碼
function load(){
alert("這可能是個廣告，也有可能不是~");
}HTML程式碼
<body onload="load()">
</body>當頁面載入完成，則執行load()方法中的alert()方法。
效果：
onClick:滑鼠點選事件
當滑鼠點選某個元素時，觸發事件
HTML程式碼
<input type="button" value="點選" onClick="click()" />js程式碼
function click(){
alert("點選提示");
}onmouseover：當滑鼠移到某元素上觸發事件
onmouseout：當滑鼠移出某元素觸發事件
onmouserdown：當滑鼠按下時觸發事件
onmouseup：當滑鼠鬆開時出發事件
例：
js程式碼
function changes(x){
var d = document.getElementById("d");
switch(x){
case 1:
d.style.backgroundColor = "red";
break;
case 2:
d.style.backgroundColor = "yellow";
break;
case 3:
d.style.backgroundColor = "blue";
break;
case 4:
d.style.backgroundColor = "green";
break;
}
}HTML程式碼
<div id="d" style="width:100px;height:100px;border:1px solid #000;" onmousemove="changes(1)" onmouseout="changes(2)" onmousedown="changes(3)" onmouseup="changes(4)">
</div>效果一覽：
移入(紅色) 移出(黃色) 按住(藍色) 鬆開(綠色)
onmousemove：滑鼠在某元素內移動，則觸發事件
與onmouseover的區別：onmouseover是在移入時只會觸發一次，而onmousemove會在元素內移動觸發多次；
js程式碼
var count = 0;
function move(){
var move = document.getElementById("move");
move.value = count++;
}
function over(){
var over = document.getElementById("over");
over.value = count++;
}HTML程式碼
<div style="width:300px;height:100px;border:1px solid red;" onmousemove="move()">
move:<input id="move" type="text"/>
</div>
<div style="width:300px;height:100px;border:1px solid red;" onmouseover="over()">
over:<input id="over" type="text"/>
</div>效果:
在上面的紅框中移動，數字會自增；
在下面的紅框中，必須要將滑鼠移出紅框範圍，在移入紅框範圍，才會自增；
onmouseenter：滑鼠在移入某一元素，則觸發事件
onmouseleave：滑鼠在移出某一元素，則觸發事件
用法和onmouseover和onmouseout一致
區別：
onmouseover和onmouseout作為父元素的事件，會傳遞給子元素；
onmouseenter和onmouseleave作為父元素的事件，不會傳遞給子元素；
例：
JS程式碼
function enter(){
var onmouse = document.getElementById("onmouse");
onmouse.value = "enter";
}
function leave(){
var onmouse = document.getElementById("onmouse");
onmouse.value = "leave";
}
function eover(){
var onmouse = document.getElementById("onmouse");
onmouse.value = "eover";
}
function eout(){
var onmouse = document.getElementById("onmouse");
onmouse.value = "eout";
}HTML程式碼
<input type="text" id="onmouse">
<div onmouseenter="enter()" onmouseleave="leave()" style="outline:1px solid red;width:200px;height:200px;">
<div onmouseover="eover()" onmouseout="eout()" style="outline:1px solid red;width:100px;height:100px;">
</div>
</div>HTML程式碼
<input type="text" id="onmouse">
<div onmouseover="eover()" onmouseout="eout()" style="outline:1px solid red;width:200px;height:200px;">
<div onmouseenter="enter()" onmouseleave="leave()" style="outline:1px solid red;width:100px;height:100px;">
</div>
</div>效果：太難截圖了。不截了。
onkeydown：當鍵盤按鍵按下時觸發事件
JS程式碼
function keyDown(){
alert("已按");
}HTML程式碼
<input onkeydown="keyDown()" type="text" name = "username" />效果：
當在輸入框中按下鍵盤上的任意鍵，觸發事件彈出警示框。
onchange：域的內容被改變
當元素的作用域的內容發生改變時，觸發事件
JS程式碼
function Change(){
alert("值發生了改變");
}HTML程式碼
<input onchange="Change()" type="text" name = "username" />效果：
當q變成q2時，觸發事件彈出警示框。