在Web頁面中使用計(jì)時(shí)器_第1頁
在Web頁面中使用計(jì)時(shí)器_第2頁
在Web頁面中使用計(jì)時(shí)器_第3頁
在Web頁面中使用計(jì)時(shí)器_第4頁
在Web頁面中使用計(jì)時(shí)器_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、在Web頁面中使用計(jì)時(shí)器 在JavaScript中，可以創(chuàng)建兩種類型的計(jì)時(shí)器，即一次性計(jì)時(shí)器和間隔性觸發(fā)計(jì)時(shí)器。一次性計(jì)時(shí)器僅在指定的延遲時(shí)間之后觸發(fā)一次，而間隔性觸發(fā)計(jì)時(shí)器每隔一定的時(shí)間間隔就觸發(fā)一次。在下面的小節(jié)中，我們將詳細(xì)討論這兩種計(jì)時(shí)器。實(shí)際上，在JavaScript中可以根據(jù)需要設(shè)置多個(gè)計(jì)時(shí)器，并在代碼中的任何地方啟動(dòng)計(jì)時(shí)器，例如在瀏覽器窗口的onload事件中啟動(dòng)計(jì)時(shí)器，或者在單擊一個(gè)按鈕時(shí)啟動(dòng)計(jì)時(shí)器。計(jì)時(shí)器常用在每隔一定間隔后翻轉(zhuǎn)廣告圖片的情形，或者在Web頁面中顯示一個(gè)實(shí)時(shí)更新的時(shí)鐘。另外，使用DHTML所創(chuàng)建的各種動(dòng)畫，都需要使用計(jì)時(shí)器的setTimeout()方法或者se

2、tInterval()方法 在本書的第12章和13章，我們將介紹DHTML的相關(guān)內(nèi)容。要設(shè)置一個(gè)一次性計(jì)時(shí)器非常簡(jiǎn)單：只需使用window對(duì)象的setTimeout()方法。window.setTimeout("your JavaScript code", milliseconds_delay)setTimeout()方法接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是要執(zhí)行的JavaScript代碼，第二個(gè)參數(shù)是計(jì)時(shí)器延遲的時(shí)間，延遲時(shí)間是以毫秒(即千分之一秒)為單位的，當(dāng)延遲時(shí)間結(jié)束時(shí)，第一個(gè)參數(shù)中的代碼將被執(zhí)行。setTimeout()方法將返回一個(gè)值，該值是一個(gè)整數(shù)，這是唯一標(biāo)識(shí)該計(jì)時(shí)器

3、的一個(gè)ID號(hào)。如果在計(jì)時(shí)器啟動(dòng)后想要停止計(jì)時(shí)器，在JavaScript就可以使用該ID號(hào)來引用相應(yīng)的計(jì)時(shí)器。例如，要設(shè)置一個(gè)在頁面加載3秒之后觸發(fā)的計(jì)時(shí)器，可以使用如下所示的代碼：<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"<html><head><script language="JavaScript" type="text/javascript">var timerID;function window_onload(

4、)timerID = setTimeout("alert(Times Up!)",3000);alert("Timer Set");</script></head><body language = JavaScript onload="window_onload()"></body></html>將上面的代碼保存為timertest.htm，并在瀏覽器中加載該文件。在瀏覽器窗口的onload事件之后延遲3000毫秒(即3秒鐘)之后，將彈出一個(gè)消息對(duì)話框。盡管setTimeou

5、t()方法是window對(duì)象的方法，但由于window對(duì)象位于瀏覽器對(duì)象模型層次結(jié)構(gòu)的頂端，所以在引用window對(duì)象的屬性或者方法時(shí)并不需要使用window對(duì)象名。因此，我們也可以將window.setTimeout()方法簡(jiǎn)寫為setTimeout()方法。值得注意的是，當(dāng)設(shè)置一個(gè)計(jì)時(shí)器時(shí)并不會(huì)停止腳本代碼的繼續(xù)執(zhí)行。計(jì)時(shí)器將在后臺(tái)運(yùn)行并在延遲到點(diǎn)之后觸發(fā)。在這期間，頁面將像往常一樣運(yùn)行，并且任何在啟動(dòng)計(jì)時(shí)器倒計(jì)時(shí)之后的代碼都將繼續(xù)執(zhí)行。因此，在上面的例子中，在設(shè)置計(jì)時(shí)器的代碼被執(zhí)行之后，alert("Timer Set")語句將立即被執(zhí)行，以彈出一個(gè)消息對(duì)話框，說明計(jì)

6、時(shí)器已經(jīng)被設(shè)置。但是，如果要在計(jì)時(shí)器觸發(fā)之前，停止計(jì)時(shí)器的執(zhí)行，又該怎么辦呢？要清除一個(gè)計(jì)時(shí)器，可以使用window對(duì)象的clearTimeout()方法。該方法僅接收一個(gè)參數(shù)，即由setTimeout()方法返回的唯一的計(jì)時(shí)器ID號(hào)。下面的代碼修改了前面的例子，以提供一個(gè)按鈕，當(dāng)單擊按鈕時(shí)將停止計(jì)時(shí)器的執(zhí)行。<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"<html><head><script language=JavaScript type="text/j

7、avascript">var timerID;function window_onload()timerID = setTimeout("alert(Times Up!)",3000);alert("Timer Set");function butStopTimer_onclick()clearTimeout(timerID);alert("Timer has been cleared");</script></head><body onload="window_onload()

8、"><form name=form1><input type="button" value="Stop Timer" name=butStopTimer language=JavaScriptonclick="return butStopTimer_onclick()"></form></body></html>將上面的代碼保存為timertest2.htm，并在瀏覽器中加載該文件。如果在3秒鐘的延遲到點(diǎn)之前，單擊Stop Timer按鈕，則該計(jì)時(shí)器將被清除。

9、在代碼中，Stop Timer按鈕的onclick事件處理器被連接到了butStopTimer_onclick()事件處理函數(shù)，在該事件處理函數(shù)中，使用了window對(duì)象的clearTimeout()方法，將ID號(hào)為timerID的計(jì)時(shí)器清除。 在下面的例子中，我們將使用setTimeout()方法來更新廣告標(biāo)語。下面的代碼將創(chuàng)建一個(gè)具有廣告標(biāo)語的Web頁面，每隔3秒鐘廣告標(biāo)語將更新一次。<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"<html><head><

10、;script language=JavaScript type="text/javascript">var currentImgNumber = 1;var numberOfImages = 3;function window_onload()setTimeout("switchImage()",3000);function switchImage()currentImgNumber+;if (currentImgNumber < numberOfImages)setTimeout("switchImage()",300

11、0); </script></head><body onload="window_onload()"><img src="AdvertImage1.jpg" name="imgAdvert"></body></html>圖  9-53秒鐘之后，該頁面將顯示第二幅圖片，如圖9-6所示。圖  9-6最后，再經(jīng)過3秒鐘時(shí)間，將顯示第三幅圖片，也就是最后一幅圖片，如圖9-7所示。圖  9-7代碼解說當(dāng)頁面加載時(shí)，<img>標(biāo)記的s

12、rc屬性被設(shè)置為第一幅圖片的文件名：<img src="AdvertImage1.jpg" name="imgAdvert">在<body>標(biāo)記中，將window對(duì)象的onload事件處理器連接到了window_onload()事件處理函數(shù)。window_onload()函數(shù)如下所示：function window_onload()setTimeout("switchImage()",3000)在window_onload()函數(shù)中，使用了setTimeout()方法以啟動(dòng)計(jì)時(shí)器的運(yùn)行，該計(jì)時(shí)器將在延遲3s后調(diào)

13、用switchImage()函數(shù)。因?yàn)檫@個(gè)計(jì)時(shí)器不需要清除處理，所以不必考慮保存setTimeout()方法所返回的計(jì)時(shí)器ID的值。switchImage()函數(shù)用以改變頁面中<img>標(biāo)記所對(duì)應(yīng)的img對(duì)象的src屬性的值：function switchImage()currentImgNumber+;標(biāo)語圖片名中的數(shù)字是從1到3，即AdvertImage1.jpg、AdvertImage2.jpg、AdvertImage3.jpg?？梢詫㈨撁嬷屑虞d的當(dāng)前標(biāo)語圖片的編號(hào)保存在全局變量currentImgNumber中，該變量定義于腳本塊的頂部，并被初始化為1。要獲得下一幅圖片的編

14、號(hào)，只需簡(jiǎn)單地將變量currentImgNumber的值加1，然后使用變量currentImgNumber的值來構(gòu)造表示圖片文件名的完整字符串，再修改img對(duì)象的src屬性，以更新頁面所加載的圖片。if (currentImgNumber < numberOfImages)setTimeout("switchImage()",3000);要顯示的標(biāo)語圖片有三幅，變量currentImgNumber中保存的是當(dāng)前圖片的編號(hào)。因此，在上面的if語句中，將對(duì)變量currentImgNumber的值進(jìn)行檢查，以確定該變量的值是否小于3。如果小于3，則表示還有圖片需要顯示，因此

15、設(shè)置另一個(gè)新的計(jì)時(shí)器，以啟動(dòng)一個(gè)新的倒計(jì)時(shí)觸發(fā)。當(dāng)再經(jīng)過3s之后，該計(jì)時(shí)器將再次調(diào)用switchImage()函數(shù)。在一些早期的瀏覽器中，只能使用上面的辦法來創(chuàng)建每隔一定時(shí)間間隔就觸發(fā)的計(jì)時(shí)器。但是，對(duì)于4.0版本以上的瀏覽器，還可以使用下面小節(jié)將要介紹的簡(jiǎn)單方法，以創(chuàng)建間隔性觸發(fā)計(jì)時(shí)器。在較新版本的瀏覽器中，window對(duì)象提供了一些新的方法用以設(shè)置計(jì)時(shí)器，即setInterval()方法和clearInterval()方法。除了所設(shè)置的計(jì)時(shí)器每隔一定時(shí)間間隔就觸發(fā)一次外，這兩個(gè)方法的工作方式與setTimeout()方法和clearTimeout()方法非常類似。與setTimeout()

16、方法類似，setInterval()方法接收兩個(gè)參數(shù)，第一個(gè)參數(shù)表示計(jì)時(shí)器到點(diǎn)時(shí)要執(zhí)行的代碼，不同的是，第二個(gè)參數(shù)不再表示計(jì)時(shí)器觸發(fā)之前的時(shí)間延遲，而是表示一個(gè)時(shí)間間隔，該間隔以毫秒為單位，每隔這個(gè)時(shí)間間隔之后，計(jì)時(shí)器就將觸發(fā)一次。例如，要設(shè)置一個(gè)每隔5s就觸發(fā)一次myFunction()函數(shù)的計(jì)時(shí)器，可以使用如下所示的代碼：var myTimerID = setInterval("myFunction()",5000);與setTimeout()方法類似，setInterval()方法也返回一個(gè)計(jì)時(shí)器唯一的ID號(hào)，如果要清除該計(jì)時(shí)器，可以使用clearInterval()

17、方法，并將該ID號(hào)作為參數(shù)傳入即可。clearInterval()方法與clearTimeout()方法非常類似，因此，要停止前面代碼中啟動(dòng)的計(jì)時(shí)器，可以使用如下所示的代碼：clearInterval(myTimerID); 下面我們來修改一下前面例子中的世界時(shí)轉(zhuǎn)換器，以在頁面中顯示一個(gè)本地時(shí)間和所選中城市時(shí)間的實(shí)時(shí)更新的時(shí)鐘。我們只需在文本編輯器中打開WorldTimeConverter.htm文件，并對(duì)其進(jìn)行修改。在已經(jīng)定義好的函數(shù)之前，添加如下所示的函數(shù)：var daylightSavingAdjust = 0;function window_onload()updateTimeZone();window.setInterval("updateTime()",1000);function updateTimeZone()并將<body>標(biāo)記修改為如下所示的代碼：<body onload="return window_onload()">保存該文件，并在瀏覽器中加載WorldTimeConverterFrameset.htm頁面。你將看到一個(gè)與前面的例子中類似的頁面，不同之處在于，頁面上的時(shí)間每秒鐘都被更新一次。代碼解說實(shí)際上，我們僅對(duì)代碼作了少量的修改。在window_onlo

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論