欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript & DHTML 實(shí)例編程（教程）（四）初級實(shí)例篇2—?jiǎng)赢?/h1>
 更新時(shí)間：2007年06月02日 00:00:00   作者：  
上篇說了動(dòng)態(tài)創(chuàng)建結(jié)點(diǎn)和刪除結(jié)點(diǎn)的例子，這一篇說一些如何用setInterval和setTimeout做簡單的動(dòng)畫。
語法皆是window.setTimeout(fn, delay), window.setInterval(fn, delay)
fn可以是一個(gè)函數(shù)名，也可以是一個(gè)執(zhí)行的字符串，但要注意的是，如果fn是一個(gè)可以執(zhí)行的字符串，且有參數(shù)，如window.setInterval("myFunction(obj)",1000)將可能拋出一個(gè)異常，這個(gè)時(shí)候，通常是你要傳遞一個(gè)對象參數(shù)，我建議用這樣的一個(gè)辦法來解決，也建議使用這種方法來使用window.setTimeout和window.setInterval：

window.setInterval(function (){
myFunction(obj);},1000);

還有一種情況就是在一個(gè)"class"里，即要執(zhí)行this.myFunction(obj)如何實(shí)現(xiàn)呢？


function jsclass() {};
jsclass.prototype.init = function (obj) {
  var self = this; //創(chuàng)建一個(gè)this指針的引用
  window.setInterval(function(obj) {
  self.myFunction(obj);},1000);
};
jsclass.prototype.myFunction = function (obj) {
  //TODO
};

DHTML的全局方法setInterval和setTimeout，所謂全局，即在window層，不屬于DHTML的DOM元素的方法里，這兩個(gè)有一些區(qū)別，網(wǎng)上也有很多說明，也就是setInterval是循環(huán)執(zhí)行一個(gè)指定函數(shù)，setTimeout是只執(zhí)行一次。例外說明一點(diǎn)，屬于window層次的，可以在前面不加window，即可以用window.setInterval也可以直接用setInterval。

它們都返回一個(gè)數(shù)字型的timerId，用于cleaverInterval/clearTimeout方法，從setInterval/setTimeout中返回。如果做過桌面應(yīng)用的朋友，可以把這個(gè)setInterval和setTimeout假想成創(chuàng)建一個(gè)線程，而timerId則是一個(gè)線程Id，而cleaverInterval/clearTimeout方法則是消毀這個(gè)線程。也許這樣可以更好的理解這兩個(gè)方法。

(在具體的應(yīng)用中，我更驅(qū)向于用setTimeout。)

知道這兩個(gè)方法的功能，先來寫一個(gè)簡單的例子：

一個(gè)一秒后彈出的alert對話框。

<script>
window.setTimeout(function () {
  alert("timeout example after 1 second");
},1000)
</script>

每一秒創(chuàng)建一個(gè)新DIV結(jié)點(diǎn)的函數(shù)
<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>

而實(shí)際應(yīng)用中，setTimeout可以有一個(gè)另類一些的應(yīng)用，比如相當(dāng)于VB中的DoEvents函數(shù)，或者.net桌面程序中Application.DoEvents();這樣的功能，也就是異步處理，因?yàn)镈HTML沒有多線程，所以說這個(gè)功能在很多的時(shí)候是為了給用戶覺得不是在假死狀態(tài)，或者給其它的程序按照代碼的邏輯繼續(xù)執(zhí)行下去而不會(huì)阻塞或者也不會(huì)跳過一段代碼執(zhí)行。

舉個(gè)例子。

下段代碼是沒有加setTimeout的。運(yùn)行后，錨點(diǎn)會(huì)馬上指向hash2

<script>
window.location.hash="hash1";
window.location.hash="hash2";
</script>

這一段是加了setTimeout的，錨點(diǎn)會(huì)在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>

下面我們做一個(gè)實(shí)用些的例子，比如一個(gè)動(dòng)態(tài)顯示tip的動(dòng)態(tài)菜單。

一、這里只講解setTimeout的方法，setInterval的請看demo里的代碼，還要注明一點(diǎn)（本例中有一個(gè)比較嚴(yán)重的問題是沒有解決的，這一問題我將留到以后再講解）是關(guān)于坐標(biāo)的。比如將下面代碼中的sliderShow放到一個(gè)table中，就可能會(huì)發(fā)現(xiàn)一些問題了。:D

思路，得到一個(gè)元素，相對這個(gè)元素的作標(biāo)，再根據(jù)一個(gè)tip的容器從而做一個(gè)動(dòng)畫，
主要用到的就是相對元素的X，Y坐標(biāo)，關(guān)于坐標(biāo)的一些屬性意義，參見下圖：
/upload/200762224726499.gif


而整個(gè)動(dòng)畫的思路，見下圖
http://www.never-online.net/tutorial/js/sliderShow/sliderTip.png
注釋代碼：


[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
是否覺得上面的例子很多都是重復(fù)的勞動(dòng)？如果減少一些豈不更好？:D，的確如此，上面的JS代碼有近一半都是重復(fù)的，在這里我就不把它優(yōu)化了，還是留給大家做一些實(shí)質(zhì)性的工作，減少上面代碼的冗余。 

相關(guān)文章

  • actionscript與javascript的區(qū)別

    actionscript與javascript的區(qū)別

    actionscript是flash的腳本語言，目前已經(jīng)由adobe公司升級到3.0版本，成為了真正意義的oop語言，JavaScript是由netscape工程師設(shè)計(jì)完成的一門腳本語言，用于web開發(fā)的前端腳本
    2011-05-05
  • JavaScript中的this機(jī)制

    JavaScript中的this機(jī)制

    簡言之，this是JavaScript語言中定義的眾多關(guān)鍵字之一，它的特殊在于它自動(dòng)定義于每一個(gè)函數(shù)域內(nèi)，但是this倒地指引啥東西卻讓很多人張二摸不著頭腦。希望看完這篇文章了你能回答出來this到底指引個(gè)甚。
    2016-01-01
  • JavaScript cookie詳解及簡單實(shí)例應(yīng)用

    JavaScript cookie詳解及簡單實(shí)例應(yīng)用

    這篇文章主要介紹了JavaScript cookie詳解及簡單實(shí)例應(yīng)用的相關(guān)資料,這里對js cookie 的介紹及基本屬性和簡單應(yīng)用做了詳解，需要的朋友可以參考下
    2016-12-12
  • 關(guān)于JavaScript的URL.createObjectURL()的使用方法

    關(guān)于JavaScript的URL.createObjectURL()的使用方法

    這篇文章主要介紹了關(guān)于URL.createObjectURL()的使用方法,使用createObjectURL可以節(jié)省性能并更快速，只不過需要在不使用的情況下手動(dòng)釋放內(nèi)存,還不清楚的朋友一起來看看吧
    2023-04-04
  • 深入了解JS之作用域和閉包

    深入了解JS之作用域和閉包

    這篇文章主要介紹了JS之作用域和閉包的相關(guān)知識，文中講解非常詳細(xì)，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
    2020-06-06
  • 詳解JavaScript 的變量

    詳解JavaScript 的變量

    這篇文章主要JavaScript 的變量，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • js比較和邏輯運(yùn)算符的介紹

    js比較和邏輯運(yùn)算符的介紹

    js比較和邏輯運(yùn)算符的介紹，需要的朋友可以參考一下
    2013-03-03
  • javascript 學(xué)習(xí)之旅 （2）

    javascript 學(xué)習(xí)之旅 （2）

    DOM是“Document Object Model”(文檔對象模型)的首字母縮寫。
    2009-02-02
  • javascript中attribute和property的區(qū)別詳解

    javascript中attribute和property的區(qū)別詳解

    這篇文章主要介紹了javascript中attribute和property的區(qū)別詳解,attribute和property對新手來說,特別容易混淆概念,本文就清晰的講解了它們的區(qū)別,需要的朋友可以參考下
    2014-06-06
  • javascript的document.referrer瀏覽器支持、失效情況總結(jié)

    javascript的document.referrer瀏覽器支持、失效情況總結(jié)

    這篇文章主要介紹了javascript的document.referrer瀏覽器支持、失效情況總結(jié),比較全面的對document.referrer在各個(gè)瀏覽器的支持情況、什么情況下會(huì)失效、Referer信息相關(guān)知識介紹等,需要的朋友可以參考下
    2014-07-07

最新評論