Javascript & DHTML 實例編程（教程）（四）初級實例篇2—動畫
編輯：JavaScript基礎知識
上篇說了動態創建結點和刪除結點的例子，這一篇說一些如何用setInterval和setTimeout做簡單的動畫。
語法皆是window.setTimeout(fn, delay), window.setInterval(fn, delay)
fn可以是一個函數名，也可以是一個執行的字符串，但要注意的是，如果fn是一個可以執行的字符串，且有參數，如window.setInterval("myFunction(obj)",1000)將可能拋出一個異常，這個時候，通常是你要傳遞一個對象參數，我建議用這樣的一個辦法來解決，也建議使用這種方法來使用window.setTimeout和window.setInterval：
window.setInterval(function (){
myFunction(obj);},1000);
還有一種情況就是在一個"class"裡，即要執行this.myFunction(obj)如何實現呢？
function jsclass() {};
jsclass.prototype.init = function (obj) {
var self = this; //創建一個this指針的引用
window.setInterval(function(obj) {
self.myFunction(obj);},1000);
};
jsclass.prototype.myFunction = function (obj) {
//TODO
};
DHTML的全局方法setInterval和setTimeout，所謂全局，即在window層，不屬於DHTML的DOM元素的方法裡，這兩個有一些區別，網上也有很多說明，也就是setInterval是循環執行一個指定函數，setTimeout是只執行一次。例外說明一點，屬於window層次的，可以在前面不加window，即可以用window.setInterval也可以直接用setInterval。
它們都返回一個數字型的timerId，用於cleaverInterval/clearTimeout方法，從setInterval/setTimeout中返回。如果做過桌面應用的朋友，可以把這個setInterval和setTimeout假想成創建一個線程，而timerId則是一個線程Id，而cleaverInterval/clearTimeout方法則是消毀這個線程。也許這樣可以更好的理解這兩個方法。
(在具體的應用中，我更驅向於用setTimeout。)
知道這兩個方法的功能，先來寫一個簡單的例子：
一個一秒後彈出的alert對話框。
<script>
window.setTimeout(function () {
alert("timeout example after 1 second");
},1000)
</script>
每一秒創建一個新DIV結點的函數
<script>
function intervalExample() {
var div=document.createElement("div");
div.innerHTML = "tutorial of DHTML and javascript programming, by www.never-online.net";
document.body.appendChild(div);
}
window.setInterval(intervalExample,1000);
</script>
而實際應用中，setTimeout可以有一個另類一些的應用，比如相當於VB中的DoEvents函數，或者.net桌面程序中Application.DoEvents();這樣的功能，也就是異步處理，因為DHTML沒有多線程，所以說這個功能在很多的時候是為了給用戶覺得不是在假死狀態，或者給其它的程序按照代碼的邏輯繼續執行下去而不會阻塞或者也不會跳過一段代碼執行。
舉個例子。
下段代碼是沒有加setTimeout的。運行後，錨點會馬上指向hash2
<script>
window.location.hash="hash1";
window.location.hash="hash2";
</script>
這一段是加了setTimeout的，錨點會在3秒後指向hash1，再在3秒後指向hash2
<script>
var doEventsDelay = 0;
function DoEvents (fn) {
window.setTimeout(fn,doEventsDelay);
doEventsDelay+=3000;
}
DoEvents(function () {
window.location.hash="hash1";
doEventsDelay-=3000;
}
);
DoEvents(function () {
window.location.hash="hash2";
doEventsDelay-=3000;
}
);
</script>
下面我們做一個實用些的例子，比如一個動態顯示tip的動態菜單。
一、這裡只講解setTimeout的方法，setInterval的請看demo裡的代碼，還要注明一點（本例中有一個比較嚴重的問題是沒有解決的，這一問題我將留到以後再講解）是關於坐標的。比如將下面代碼中的sliderShow放到一個table中，就可能會發現一些問題了。:D
思路，得到一個元素，相對這個元素的作標，再根據一個tip的容器從而做一個動畫，
主要用到的就是相對元素的X，Y坐標，關於坐標的一些屬性意義，參見下圖：
而整個動畫的思路，見下圖
注釋代碼：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]是否覺得上面的例子很多都是重復的勞動？如果減少一些豈不更好？:D，的確如此，上面的JS代碼有近一半都是重復的，在這裡我就不把它優化了，還是留給大家做一些實質性的工作，減少上面代碼的冗余。
語法皆是window.setTimeout(fn, delay), window.setInterval(fn, delay)
fn可以是一個函數名，也可以是一個執行的字符串，但要注意的是，如果fn是一個可以執行的字符串，且有參數，如window.setInterval("myFunction(obj)",1000)將可能拋出一個異常，這個時候，通常是你要傳遞一個對象參數，我建議用這樣的一個辦法來解決，也建議使用這種方法來使用window.setTimeout和window.setInterval：
window.setInterval(function (){
myFunction(obj);},1000);
還有一種情況就是在一個"class"裡，即要執行this.myFunction(obj)如何實現呢？
function jsclass() {};
jsclass.prototype.init = function (obj) {
var self = this; //創建一個this指針的引用
window.setInterval(function(obj) {
self.myFunction(obj);},1000);
};
jsclass.prototype.myFunction = function (obj) {
//TODO
};
DHTML的全局方法setInterval和setTimeout，所謂全局，即在window層，不屬於DHTML的DOM元素的方法裡，這兩個有一些區別，網上也有很多說明，也就是setInterval是循環執行一個指定函數，setTimeout是只執行一次。例外說明一點，屬於window層次的，可以在前面不加window，即可以用window.setInterval也可以直接用setInterval。
它們都返回一個數字型的timerId，用於cleaverInterval/clearTimeout方法，從setInterval/setTimeout中返回。如果做過桌面應用的朋友，可以把這個setInterval和setTimeout假想成創建一個線程，而timerId則是一個線程Id，而cleaverInterval/clearTimeout方法則是消毀這個線程。也許這樣可以更好的理解這兩個方法。
(在具體的應用中，我更驅向於用setTimeout。)
知道這兩個方法的功能，先來寫一個簡單的例子：
一個一秒後彈出的alert對話框。
<script>
window.setTimeout(function () {
alert("timeout example after 1 second");
},1000)
</script>
每一秒創建一個新DIV結點的函數
<script>
function intervalExample() {
var div=document.createElement("div");
div.innerHTML = "tutorial of DHTML and javascript programming, by www.never-online.net";
document.body.appendChild(div);
}
window.setInterval(intervalExample,1000);
</script>
而實際應用中，setTimeout可以有一個另類一些的應用，比如相當於VB中的DoEvents函數，或者.net桌面程序中Application.DoEvents();這樣的功能，也就是異步處理，因為DHTML沒有多線程，所以說這個功能在很多的時候是為了給用戶覺得不是在假死狀態，或者給其它的程序按照代碼的邏輯繼續執行下去而不會阻塞或者也不會跳過一段代碼執行。
舉個例子。
下段代碼是沒有加setTimeout的。運行後，錨點會馬上指向hash2
<script>
window.location.hash="hash1";
window.location.hash="hash2";
</script>
這一段是加了setTimeout的，錨點會在3秒後指向hash1，再在3秒後指向hash2
<script>
var doEventsDelay = 0;
function DoEvents (fn) {
window.setTimeout(fn,doEventsDelay);
doEventsDelay+=3000;
}
DoEvents(function () {
window.location.hash="hash1";
doEventsDelay-=3000;
}
);
DoEvents(function () {
window.location.hash="hash2";
doEventsDelay-=3000;
}
);
</script>
下面我們做一個實用些的例子，比如一個動態顯示tip的動態菜單。
一、這裡只講解setTimeout的方法，setInterval的請看demo裡的代碼，還要注明一點（本例中有一個比較嚴重的問題是沒有解決的，這一問題我將留到以後再講解）是關於坐標的。比如將下面代碼中的sliderShow放到一個table中，就可能會發現一些問題了。:D
思路，得到一個元素，相對這個元素的作標，再根據一個tip的容器從而做一個動畫，
主要用到的就是相對元素的X，Y坐標，關於坐標的一些屬性意義，參見下圖：
而整個動畫的思路，見下圖
注釋代碼： [Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]是否覺得上面的例子很多都是重復的勞動？如果減少一些豈不更好？:D，的確如此，上面的JS代碼有近一半都是重復的，在這裡我就不把它優化了，還是留給大家做一些實質性的工作，減少上面代碼的冗余。
小編推薦
熱門推薦