melo 唐

1.JavaScript 的 window 物件

在javascript 中 window是全域物件也是最上層的物件。

每當有新的頁面或框架被開啟,window就會被建立。

Javascript 中的 focus 與 blur

focus : 當你點擊視窗瀏覽器會賦予它"焦點"。

blur : 當你點擊另一格視窗,原來的視窗將會模糊(失去焦點)。 

note : Jquery的focus and blur 是要附加在HTML表單欄位與其他元素上,而非JS的window物件。

2. window.onfocus and window.onblur

透過window.onfocus 我們分辨視窗何時獲得焦點。

透過window.onblur 我們可以分辨哪些活躍瀏覽器失去焦點。

ex.

window.onblur = blurResponse;

//自定義函式

function blurResponse()

{

}

3.定時器方法

JavaScript 與 Jquery 皆有提供根據時間經過去呼叫函式的定時器方法。

Javascript 得 window物件有4個定時器方法可以調控函式呼叫時間。

1.setTimeout : setTimeout(myFunction,4000) , 當想要必須等待一段時間後再叫函式執行時,請愛用setTimeout。 

2.clearTimeout : clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

3.setInterval : setInterval(repeateMe,1000) , 再經過1000毫秒後反覆執行repeateMe方法。

4.clearinterval : 

myInterval = setInterval(repeateMe,1000); // myInterval為識別setInterval方法之變數。

clearInterval(myInterval); // clearInterval方法呼叫setInterval方法清除他的定時器,停止反覆執行之動作。

note: setTimeout and setInterval 不可用在window物件以外。 

而Jquery 則提供我們delay方法。

1.delay : slideDown().delay(5000).slideUp(); 中間隔5秒在執行下一個動畫。

範例: 

$(document).ready(function () {

var clix = [0, 0, 0, 0]; //head,eyes,nose,month

//用來紀錄setInterval,後續用以取消自動執行function
var int1, int2, int3;

function runLightning() {

//用int1紀錄setInterval,int1用來取消每4秒自動執行lightning_one()
int1 = setInterval(function () {
lightning_one(); //,每4秒自動執行lightning_one()
}, 4000);

int2 = setInterval(function () {
lightning_two();
},
5000
);

int3 = setInterval(function () {
lightning_three();
},
7000
);

} // end of runLightning()

function stopMe() {
//取消自動執行(setInterval)
window.clearInterval(int1);
window.clearInterval(int2);
window.clearInterval(int3);
}

function lightning_one() {
$("#container #lightning1").fadeIn(250).fadeOut(250);
};

function lightning_two() {
$("#container #lightning2").fadeIn("fast").fadeOut("fast");
};

function lightning_three() {
$("#container #lightning3").fadeIn("fast").fadeOut("fast");
};

//當視窗失去焦點時,執行stopMe()
window.onblur = stopMe;
//當視窗取得焦點執行runLightning()
window.onfocus = runLightning;
//一開瀏覽器先跑runLightning()
runLightning();

$("#head").click(function () {
//0:紀錄這是head , this:是把#head當成物件傳過去
moveMe(0, this);
})//end of head function

$("#eyes").click(function () {
moveMe(1, this);
})//end of head function

$("#nose").click(function () {
moveMe(2, this);
})//end of head function

$("#mouth").click(function () {
moveMe(3, this);
})//end of head function

function moveMe(i, obj) {
if (clix[i] < 9) {
$(obj).animate({ left: "-=367px" }, 500);
clix[i] = clix[i] + 1;
}
else {
clix[i] = 0;
$(obj).animate({ left: "0px" }, 500);
}
} //end of moveMe function

})//end of ready function