JavaScript教程及實(shí)例講解

1、JavaScript教程及實(shí)例講解.txt不相信永遠(yuǎn),不擁有期待,不需要諾言當(dāng)你不能再擁有的時(shí)候，唯一可以做的，就是令自己不要忘記。王子之所以能口奐酉星目垂美人是因?yàn)橥踝佑眯牧宋夷芸趭J酉星什么JavaScript教程及實(shí)例講解.JS簡(jiǎn)介及特點(diǎn)JavaScript語(yǔ)言的前身叫作Livescript。自從Sun公司推出著名的Java語(yǔ)言之后，Netscape公司引進(jìn)了Sun公司有關(guān)Java的程序概念，將自己原有的Livescript 重新進(jìn)行設(shè)計(jì)，并改名為JavaScript。JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有安全性能的腳本語(yǔ)言，有了JavaScript，可使網(wǎng)頁(yè)變得生動(dòng)。使用它的

2、目的是與HTML超文本標(biāo)識(shí)語(yǔ)言、Java 腳本語(yǔ)言一起實(shí)現(xiàn)在一個(gè)網(wǎng)頁(yè)中鏈接多個(gè)對(duì)象，與網(wǎng)絡(luò)客戶(hù)交互作用，從而可以開(kāi)發(fā)客戶(hù)端的應(yīng)用程序。它是通過(guò)嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML語(yǔ)言中實(shí)現(xiàn)的。JavaScript具有很多優(yōu)點(diǎn)：1.簡(jiǎn)單性:-JavaScript是一種腳本編寫(xiě)語(yǔ)言，它采用小程序段的方式實(shí)現(xiàn)編程，像其它腳本語(yǔ)言一樣，JavaScript同樣已是一種解釋性語(yǔ)言，它提供了一個(gè)簡(jiǎn)易的開(kāi)發(fā)過(guò)程。它的基本結(jié)構(gòu)形式與C、C+、VB、Delphi十分類(lèi)似。但它不像這些語(yǔ)言一樣，需要先編譯，而是在程序運(yùn)行過(guò)程中被逐行地解釋。它與HTML標(biāo)識(shí)結(jié)合在一起，從而方便用戶(hù)的使用操作。2.動(dòng)態(tài)性:-JavaScrip

3、t是動(dòng)態(tài)的，它可以直接對(duì)用戶(hù)或客戶(hù)輸入做出響應(yīng)，無(wú)須經(jīng)過(guò)Web服務(wù)程序。它對(duì)用戶(hù)的反映響應(yīng)，是采用以事件驅(qū)動(dòng)的方式進(jìn)行的。所謂事件驅(qū)動(dòng)，就是指在主頁(yè)中執(zhí)行了某種操作所產(chǎn)生的動(dòng)作，就稱(chēng)為“事件”。比如按下鼠標(biāo)、移動(dòng)窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會(huì)引起相應(yīng)的事件響應(yīng)。3.跨平臺(tái)性:-JavaScript是依賴(lài)于瀏覽器本身，與操作環(huán)境無(wú)關(guān)，只要能運(yùn)行瀏覽器的計(jì)算機(jī)，并支持JavaScript的瀏覽器就可以正確執(zhí)行。4.節(jié)省CGI的交互時(shí)間:-隨著WWW的迅速發(fā)展有許WWW服務(wù)器提供的服務(wù)要與瀏覽者進(jìn)行交流，確瀏覽的身份、需服務(wù)的內(nèi)等等，這項(xiàng)工作通常由CGI/PERL編寫(xiě)相應(yīng)的接口

4、程序與用戶(hù)進(jìn)行交互來(lái)完成。很顯然，通過(guò)網(wǎng)絡(luò)與用戶(hù)的交互過(guò)程一方面增大了網(wǎng)絡(luò)的通信量，另一方面影響了服務(wù)器的服務(wù)性能。服務(wù)器為一個(gè)用戶(hù)運(yùn)行一個(gè)CGI時(shí)，需要一個(gè)進(jìn)程為它服務(wù)，它要占用服務(wù)器的資源(如CPU服務(wù)、內(nèi)存耗費(fèi)等)，如果用戶(hù)填表出現(xiàn)錯(cuò)誤，交互服務(wù)占用的時(shí)間就會(huì)相應(yīng)增加。被訪(fǎng)問(wèn)的熱點(diǎn)主機(jī)與用戶(hù)交互越多，服務(wù)器的性能影響就越大。JavaScript是一種基于客戶(hù)端瀏覽器的語(yǔ)言，用戶(hù)在瀏覽中填表、驗(yàn)證的交互過(guò)程只是通過(guò)瀏覽器對(duì)調(diào)入HTML文檔中的JavaScript源代碼進(jìn)行解釋執(zhí)行來(lái)完成的，即使是必須調(diào)用CGI的部分，瀏覽器只將用戶(hù)輸入驗(yàn)證后的信息提交給遠(yuǎn)程的服務(wù)器，大大減少了服務(wù)器的開(kāi)銷(xiāo)。

5、 .JS與Java的區(qū)別JavaScript語(yǔ)言和Java語(yǔ)言是相關(guān)的，但它們之間的聯(lián)系并不像想象中的那樣緊密。二者的區(qū)別體現(xiàn)在：首先，它們是兩個(gè)公司開(kāi)發(fā)的不同的兩個(gè)產(chǎn)品，Java是SUN公司推出的新一代面向?qū)ο蟮某绦蛟O(shè)計(jì)語(yǔ)言，特別適合于Internet應(yīng)用程序開(kāi)發(fā)；而JavaScript是Netscape公司的產(chǎn)品，其目的是為了擴(kuò)展Netscape Navigator功能,而開(kāi)發(fā)的一種可以嵌入Web頁(yè)面中的基于對(duì)象和事件驅(qū)動(dòng)的解釋性語(yǔ)言。其次，JavaScript是基于對(duì)象的，而Java是面向?qū)ο蟮模碕ava是一種真正的面向?qū)ο蟮恼Z(yǔ)言，即使是開(kāi)發(fā)簡(jiǎn)單的程序，必須設(shè)計(jì)對(duì)象。JavaScrip

6、t是種腳本語(yǔ)言，它可以用來(lái)制作與網(wǎng)絡(luò)無(wú)關(guān)的，與用戶(hù)交互作用的復(fù)雜軟件。它是一種基于對(duì)象和事件驅(qū)動(dòng)的編程語(yǔ)言。因而它本身提供了非常豐富的內(nèi)部對(duì)象供設(shè)計(jì)人員使用。第三，兩種語(yǔ)言在其瀏覽器中所執(zhí)行的方式不一樣。Java的源代碼在傳遞到客戶(hù)端執(zhí)行之前，必須經(jīng)過(guò)編譯，因而客戶(hù)端上必須具有相應(yīng)平臺(tái)上的仿真器或解釋器，它可以通過(guò)編譯器或解釋器實(shí)現(xiàn)獨(dú)立于某個(gè)特定的平臺(tái)編譯代碼的束縛。JavaScript是一種解釋性編程語(yǔ)言，其源代碼在發(fā)往客戶(hù)端執(zhí)行之前不需經(jīng)過(guò)編譯，而是將文本格式的字符代碼發(fā)送給客戶(hù)，由瀏覽器解釋執(zhí)行。第四，兩種語(yǔ)言所采取的變量是不一樣的。Java采用強(qiáng)類(lèi)型變量檢查，即所有變量在編譯之前必須作

7、聲明。JavaScript中變量聲明，采用其弱類(lèi)型。即變量在使用前不需作聲明，而是解釋器在運(yùn)行時(shí)檢查其數(shù)據(jù)類(lèi)型。第五，代碼格式不一樣。Java是一種與HTML無(wú)關(guān)的格式，必須通過(guò)像HTML中引用外媒體那么進(jìn)行裝載，其代碼以字節(jié)代碼的形式保存在獨(dú)立的文檔中。JavaScript的代碼是一種文本字符格式，可以直接嵌入HTML文檔中，并且可動(dòng)態(tài)裝載。編寫(xiě)HTML文檔就像編輯文本文件一樣方便。第六，嵌入方式不一樣。在HTML文檔中，兩種編程語(yǔ)言的標(biāo)識(shí)不同，JavaScript使用 <script>.</script> 來(lái)標(biāo)識(shí)，而Java使用<applet> . &l

8、t;/applet>來(lái)標(biāo)識(shí)。第七，靜態(tài)綁定和動(dòng)態(tài)綁定。Java采用靜態(tài)聯(lián)編，即Java的對(duì)象引用必須在編譯時(shí)的進(jìn)行，以使編譯器能夠?qū)崿F(xiàn)強(qiáng)類(lèi)型檢查。JavaScript采用動(dòng)態(tài)聯(lián)編，即JavaScript的對(duì)象引用在運(yùn)行時(shí)進(jìn)行檢查，如不經(jīng)編譯則就無(wú)法實(shí)現(xiàn)對(duì)象引用的檢查。.JS的運(yùn)行環(huán)境在目前流行的瀏覽器中，Netscape公司的Navigator 2.0以上版本的瀏覽器具都有處理JavaScript源代碼的能力。JavaScript在其中實(shí)現(xiàn)了它的1.0版本，并在后來(lái)的Navigator 3.0實(shí)現(xiàn)了它的1.1版本，在現(xiàn)在推出的Navigator 4.0（Communicator）中,Ja

9、vaScript在其中實(shí)現(xiàn)了它的1.2版本。微軟公司從它的Internet Explorer 3.0版開(kāi)始支持JavaScript。Microsoft把自己實(shí)現(xiàn)的JavaScript規(guī)范叫做JScript。這個(gè)規(guī)范與Netscape Navigator瀏覽器中的JavaScript規(guī)范在基本功能上和語(yǔ)法上是一致的，但是在個(gè)別的對(duì)象實(shí)現(xiàn)方面還有一定的差別，這里特別需要予以注意。.JS的數(shù)據(jù)類(lèi)型和變量JavaScript 有六種數(shù)據(jù)類(lèi)型。主要的類(lèi)型有 number、string、object 以及 Boolean 類(lèi)型,其他兩種類(lèi)型為 null 和 undefined。String 字符串類(lèi)型:字

10、符串是用單引號(hào)或雙引號(hào)來(lái)說(shuō)明的。（使用單引號(hào)來(lái)輸入包含引號(hào)的字符串。）如：“The cow jumped over the moon.” 數(shù)值數(shù)據(jù)類(lèi)型：JavaScript 支持整數(shù)和浮點(diǎn)數(shù)。整數(shù)可以為正數(shù)、0 或者負(fù)數(shù)；浮點(diǎn)數(shù)可以包含小數(shù)點(diǎn)、也可以包含一個(gè) “e”（大小寫(xiě)均可，在科學(xué)記數(shù)法中表示“10的冪”）、或者同時(shí)包含這兩項(xiàng)。 Boolean 類(lèi)型：可能的 Boolean 值有 true 和 false。這是兩個(gè)特殊值，不能用作 1 和 0。 Undefined 數(shù)據(jù)類(lèi)型：一個(gè)為 undefined 的值就是指在變量被創(chuàng)建后，但未給該變量賦值以前所具有的值。 Null 數(shù)據(jù)類(lèi)型：null

11、 值就是沒(méi)有任何值，什么也不表示。 object類(lèi)型：除了上面提到的各種常用類(lèi)型外，對(duì)象也是JavaScript中的重要組成部分，這部分將在后面章節(jié)詳細(xì)介紹。 在 JavaScript 中變量用來(lái)存放腳本中的值，這樣在需要用這個(gè)值的地方就可以用變量來(lái)代表，一個(gè)變量可以是一個(gè)數(shù)字，文本或其它一些東西。JavaScript是一種對(duì)數(shù)據(jù)類(lèi)型變量要求不太嚴(yán)格的語(yǔ)言，所以不必聲明每一個(gè)變量的類(lèi)型，變量聲明盡管不是必須的，但在使用變量之前先進(jìn)行聲明是一種好的習(xí)慣?？梢允褂?var 語(yǔ)句來(lái)進(jìn)行變量聲明。如：var men = true; / men 中存儲(chǔ)的值為 Boolean 類(lèi)型。 變量命名:JavaS

12、cript 是一種區(qū)分大小寫(xiě)的語(yǔ)言，因此將一個(gè)變量命名為 computer 和將其命名為 Computer是不一樣的。另外，變量名稱(chēng)的長(zhǎng)度是任意的，但必須遵循以下規(guī)則：.第一個(gè)字符必須是一個(gè)字母（大小寫(xiě)均可）、或一個(gè)下劃線(xiàn)(_)或一個(gè)美元符 ($)。.后續(xù)的字符可以是字母、數(shù)字、下劃線(xiàn)或美元符。.變量名稱(chēng)不能是保留字。 .JS的語(yǔ)句及語(yǔ)法JavaScript所提供的語(yǔ)句分為以下幾大類(lèi)：1.變量聲明，賦值語(yǔ)句：var。語(yǔ)法如下： var 變量名稱(chēng) =初始值例：var computer = 32 /定義computer是一個(gè)變量，且有初值為32。2.函數(shù)定義語(yǔ)句：function，return。語(yǔ)

13、法如下： function 函數(shù)名稱(chēng) （函數(shù)所帶的參數(shù)） 函數(shù)執(zhí)行部分 return 表達(dá)式 /return語(yǔ)句指明將返回的值。 例：function square ( x ) return x*x 3.條件和分支語(yǔ)句：if.else，switch。if.else語(yǔ)句完成了程序流程塊中分支功能：如果其中的條件成立，則程序執(zhí)行緊接著條件的語(yǔ)句或語(yǔ)句塊；否則程序執(zhí)行else中的語(yǔ)句或語(yǔ)句塊。 語(yǔ)法如下： if (條件) 執(zhí)行語(yǔ)句1 else 執(zhí)行語(yǔ)句2 例：if (result = true) response = “你答對(duì)了！” else response = “你錯(cuò)了！” 分支語(yǔ)句switch

14、可以根據(jù)一個(gè)變量的不同取值采取不同的處理方法。 語(yǔ)法如下： switch (expression) case label1: 語(yǔ)句串1； case label2: 語(yǔ)句串2； case label3: 語(yǔ)句串3； . default: 語(yǔ)句串3； 如果表達(dá)式取的值同程序中提供的任何一條語(yǔ)句都不匹配，將執(zhí)行default中的語(yǔ)句。 4. 循環(huán)語(yǔ)句：for， for.in，while,break,continue。for語(yǔ)句的語(yǔ)法如下： for (初始化部分；條件部分；更新部分) 執(zhí)行部分. 只要循環(huán)的條件成立，循環(huán)體就被反復(fù)的執(zhí)行。for.in語(yǔ)句與for語(yǔ)句有一點(diǎn)不同，它循環(huán)的范圍是一個(gè)對(duì)象所

15、有的屬性或是一個(gè)數(shù)組的所有元素。for.in語(yǔ)句的語(yǔ)法如下： for (變量 in 對(duì)象或數(shù)組) 語(yǔ)句. while語(yǔ)句所控制的循環(huán)不斷的測(cè)試條件，如果條件始終成立，則一直循環(huán)，直到條件不再成立。語(yǔ)法如下： while (條件) 執(zhí)行語(yǔ)句. break語(yǔ)句結(jié)束當(dāng)前的各種循環(huán)，并執(zhí)行循環(huán)的下一條語(yǔ)句。continue語(yǔ)句結(jié)束當(dāng)前的循環(huán)，并馬上開(kāi)始下一個(gè)循環(huán)。5.對(duì)象操作語(yǔ)句：with，this，new。with語(yǔ)句的語(yǔ)法如下：with (對(duì)象名稱(chēng)) 執(zhí)行語(yǔ)句 作用是這樣的：如果你想使用某個(gè)對(duì)象的許多屬性或方法時(shí)，只要在with語(yǔ)句的（）中寫(xiě)出這個(gè)對(duì)象的名稱(chēng)，然后在下面的執(zhí)行語(yǔ)句中直接寫(xiě)這個(gè)對(duì)象的

16、屬性名或方法名就可以了。 ew語(yǔ)句是一種對(duì)象構(gòu)造器，可以用new語(yǔ)句來(lái)定義一個(gè)新對(duì)象。語(yǔ)法是這樣的：新對(duì)象名稱(chēng) new 真正的對(duì)象名 譬如說(shuō)，我們可以這樣定義一個(gè)新的日期對(duì)象： var curr new Date()，然后，變量curr就具有了Date對(duì)象的屬性。 this運(yùn)算符總是指向當(dāng)前的對(duì)象。 6.注釋語(yǔ)句：/，/*.*/。 /這是單行注釋 /*這可以多行注釋. */ .JS的對(duì)象及其屬性和方法在JavaScript中是基于對(duì)象的編程，而不是完全的面向?qū)ο蟮木幊獭Ｄ屈N什麼是對(duì)象呢？如果你學(xué)過(guò)一些VB的編程，對(duì)這個(gè)名詞一定不會(huì)陌生。通俗的說(shuō)，對(duì)象是變量的集合體，對(duì)象提供對(duì)于數(shù)據(jù)的一致的組織

17、手段，描述了一類(lèi)事物的共同屬性。 在JavaScript中，可以使用以下幾種對(duì)象：.由瀏覽器根據(jù)web頁(yè)面的內(nèi)容自動(dòng)提供的對(duì)象。.JavaScript的內(nèi)置對(duì)象，如Date,Math等。.服務(wù)器上的固有對(duì)象。.用戶(hù)自定義的對(duì)象。 JavaScript中的對(duì)象是由屬性和方法兩個(gè)基本的元素的構(gòu)成的。對(duì)象的屬性是指對(duì)象的背景色，長(zhǎng)度，名稱(chēng)等。對(duì)象的方法是指對(duì)屬性所進(jìn)行的操作，就是一個(gè)對(duì)象自己所屬的函數(shù)，如對(duì)對(duì)象取整，使對(duì)象獲得焦點(diǎn)，使對(duì)象獲得個(gè)隨機(jī)數(shù)等等一系列操作。舉個(gè)例子來(lái)說(shuō)，將汽車(chē)看成是一個(gè)對(duì)象，汽車(chē)的顏色，大小，品牌等叫做屬性，而發(fā)動(dòng)，剎車(chē)，拐彎等就叫做方法。 可以采用這樣的方法來(lái)訪(fǎng)問(wèn)對(duì)象的屬

18、性：對(duì)象名稱(chēng).屬性名稱(chēng)，例：mycomputer.year=1996，mycomputer.owner = “me”。可以采用這樣的方法，將對(duì)象的方法同函數(shù)聯(lián)系起來(lái)：對(duì)象.方法名字=函數(shù)名字或?qū)ο?屬性.方法名，例：this.display=display，document.writeln（“this is method”）。 多看或多寫(xiě)一些程序，就會(huì)理解對(duì)象的方法和屬性的含義了！各個(gè)對(duì)象的各種屬性和方法，可點(diǎn)擊參考！ .JS的事件處理事件是瀏覽器響應(yīng)用戶(hù)交互操作的一種機(jī)制，JavaScript的事件處理機(jī)制可以改變?yōu)g覽器響應(yīng)用戶(hù)操作的方式，這樣就開(kāi)發(fā)出具有交互性，并易于使用的網(wǎng)頁(yè)。瀏覽器為了

19、響應(yīng)某個(gè)事件而進(jìn)行的處理過(guò)程，叫做事件處理。 事件定義了用戶(hù)與頁(yè)面交互時(shí)產(chǎn)生的各種操作，例如單擊超級(jí)連接或按鈕時(shí)，就產(chǎn)生一個(gè)單擊（click）操作事件。瀏覽器在程序運(yùn)行的大部分時(shí)間都等待交互事件的發(fā)生，并在事件發(fā)生時(shí)，自動(dòng)調(diào)用事件處理函數(shù)，完成事件處理過(guò)程。 事件不僅可以在用戶(hù)交互過(guò)程中產(chǎn)生，而且瀏覽器自己的一些動(dòng)作也可以產(chǎn)生事件，例：當(dāng)載入一個(gè)頁(yè)面時(shí)，就會(huì)發(fā)生load事件，卸載一個(gè)頁(yè)面時(shí)，就會(huì)發(fā)生unload事件等。歸納起來(lái)，必需使用的事件有三大類(lèi)：1.引起頁(yè)面之間跳轉(zhuǎn)的事件，主要是超連接事件。 2.事件瀏覽器自己引起的事件。3.事件在表單內(nèi)部同界面對(duì)象的交互。 各種JavaScript的事

20、件可點(diǎn)這里參考。.實(shí)例講解1. 日期星期的顯示源代碼如下：(這段程序放在<body>與</body>之間)<!-todayDate = new Date();date = todayDate.getDate();month= todayDate.getMonth() +1;year= todayDate.getYear();document.write("今天是")document.write("<br>")if(navigator.appName = "Netscape")document.

21、write(1900+year);document.write("年");document.write(month);document.write("月");document.write(date);document.write("日");document.write("<br>")if(navigator.appVersion.indexOf("MSIE") != -1)document.write(year);document.write("年");docum

22、ent.write(month);document.write("月");document.write(date);document.write("日");document.write("<br>")if (todayDate.getDay() = 5) document.write("星期五")if (todayDate.getDay() = 6) document.write("星期六")if (todayDate.getDay() = 0) document.write(&qu

23、ot;星期日")if (todayDate.getDay() = 1) document.write("星期一")if (todayDate.getDay() = 2) document.write("星期二")if (todayDate.getDay() = 3) document.write("星期三")if (todayDate.getDay() = 4) document.write("星期四")/->源程序講解：todayDate = new Date();當(dāng)定義一個(gè)新的對(duì)象時(shí)，通常使用“

24、new”操作符。在這里，就是創(chuàng)建了日期對(duì)象。date = todayDate.getDate();getDate()是Date對(duì)象的一種方法，其功能是獲得當(dāng)前的日期。month= todayDate.getMonth() + 1 ; getMonth()是Date對(duì)象的一種方法，其功能是獲得當(dāng)前的日期，由于月份是從0開(kāi)始的，所以這里要“+1”。year= todayDate.getYear()getYear()是Date對(duì)象的一種方法，其功能是獲得當(dāng)前的年份。document.write("今天是") document.write("<br>"

25、;)輸出“今天是”if(navigator.appName = "Netscape") document.write(1900+year); document.write("年"); document.write(month); document.write("月"); document.write(date); document.write("日");document.write("<br> ") 如果瀏覽器是Netscape，輸出今天是“year”+“年”+“month”+“月”

26、+“date”+“日”，其中年要加1900。if(navigator.appVersion.indexOf("MSIE") != -1) document.write(year); document.write("年"); document.write(month); document.write("月"); document.write(date); document.write("日");document.write("<br> ") 如果瀏覽器是IE，直接輸出今天是“year”

27、+“年”+“month”+“月”+“date”+“日”。document.write("") ；在“日期”與“星期”之間輸入一個(gè)空格。if (todayDate.getDay() = 5) document.write("星期五")；if (todayDate.getDay() = 6) document.write("星期六")；if (todayDate.getDay() = 0) document.write("星期日")；if (todayDate.getDay() = 1) document.write(

28、"星期一")；if (todayDate.getDay() = 2) document.write("星期二")；if (todayDate.getDay() = 3) document.write("星期三")；if (todayDate.getDay() = 4) document.write("星期四")getDay()是Date對(duì)象的一種方法，其功能是獲得當(dāng)前是星期幾。document.write輸出今天是“星期幾”。2. 分時(shí)問(wèn)候源代碼如下：(這段程序放在<body>與</body>

29、;之間)<script language="JavaScript"><!-var mess1=""document.write("<center><font color='#0000FF' size=4><b>")day = new Date( )hr = day.getHours( )if ( hr >= 0 ) && (hr <= 4 )mess1="深夜了，注意身體,該休息了！"if ( hr >= 4 )

30、 && (hr < 7)mess1="清晨好，這麼早就上網(wǎng)呀？！ "if ( hr >= 7 ) && (hr < 12)mess1="早上好，一天之際在于晨，又是美好的一天！"if ( hr >= 12) && (hr <= 13)mess1="該吃午飯啦！有什麼好吃的？"if ( hr >= 13) && (hr <= 17)mess1="外面的天氣很熱吧?！心靜自然涼！ "if ( hr >= 17

31、) && (hr <= 18)mess1="太陽(yáng)落山了！快看看夕陽(yáng)吧！"if (hr >= 18) && (hr <= 19)mess1="吃過(guò)晚飯了嗎？"if (hr >= 19) && (hr <= 23)mess1="一天過(guò)的可真快！今天過(guò)的好嗎？"document.write(mess1)document.write("</b></font></center>")/-></scrip

32、t>源程序講解：var mess1=""定義一個(gè)新變量。document.write("<center><b> ")設(shè)置格式，可以是字體，顏色等。day = new Date( ) 設(shè)置Date的一個(gè)新對(duì)象。hr = day.getHours( )把當(dāng)前的“小時(shí)”的值賦給hr.if ( hr >= 0 ) && (hr <= 4 )mess1="深夜了，注意身體,該休息了！"在0-4點(diǎn)間，出現(xiàn)“清晨好，這麼早就上網(wǎng)呀？！”字樣。以下，類(lèi)推。if ( hr >= 4 ) &

33、amp;& (hr < 7) mess1="清晨好，這麼早就上網(wǎng)呀？！"if ( hr >= 7 ) && (hr < 12) mess1="早上好，一天之際在于晨，又是美好的一天！" if ( hr >= 12) && (hr <= 13)mess1="該吃午飯啦！有什麼好吃的？" if ( hr >= 13) && (hr <= 17)mess1="外面的天氣很熱吧?！心靜自然涼！ "if ( hr >= 1

34、7) && (hr <= 18)mess1="太陽(yáng)落山了！快看看夕陽(yáng)吧！"if (hr >= 18) && (hr <= 19)mess1="吃過(guò)晚飯了嗎？"if (hr >= 19) && (hr <= 23)mess1="一天過(guò)的可真快！今天過(guò)的好嗎？"同上。document.write(mess1)輸出mess1的值。document.write("</b> ")字體設(shè)置結(jié)束。3. 停留時(shí)間顯示2源代碼如下：(這段程序放

35、在<body>與</body>之間)<form name=forms> <p><font class=p2 color=red>您在本站停留了</font> </p> <p> <input type=text name=input size=10> <script language=javascript>var second=0;var minute=0;var hour=0;idt=window.setTimeout("interval();",1000

36、);function interval()second+;if(second=60)second=0;minute+=1;if(minute=60)minute=0;hour+=1;document.forms.input.value=hour+"時(shí)"+minute+"分"+second+"秒"idt=window.setTimeout("interval();",1000);</script> </p></form>源程序講解：var second=0;var minute=0

37、;var hour=0;定義三個(gè)變量。idt=window.setTimeout("interval();",1000); 先初始化變量，這句話(huà)不可少。function interval() second+; if(second=60)second=0;minute+=1; if(minute=60)minute=0;hour+=1;定義一個(gè)函數(shù)。功能是形成一個(gè)計(jì)時(shí)系統(tǒng)。document.forms.input.value = hour+"時(shí)"+minute+"分"+second+"秒" 輸出時(shí)間。idt=wind

38、ow.setTimeout("interval();",1000);每1秒，調(diào)用一次interval()函數(shù)，就是一秒走一次。4. 動(dòng)態(tài)數(shù)字時(shí)鐘1源代碼如下：(建議使用1024*768的分辨率)(這段程序放在<body>與</body>之間)<script language="JavaScript"><!-function Time() if (!document.layers&&!document.all) return var Timer=new Date() var hours=Timer.

39、getHours() var minutes=Timer.getMinutes() var seconds=Timer.getSeconds() var noon="AM" if (hours>12) noon="PM" hours=hours-12 if (hours=0) hours=12 if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds/change font size here to your d

40、esiremyclock="<font size='4' face='Arial' color=blue>"+hours+":"+minutes+":" +seconds+" "+noon+"</b></font>"if (document.layers)document.layers.position.document.write(myclock)document.layers.position.document.close(

41、)else if (document.all)position.innerHTML=myclocksetTimeout("Time()",1000) /-></script><span id="position" style="position:absolute;left:441px;top:190px; width: 128px; height: 30px"> </span>源程序講解：function Time() 定義一個(gè)函數(shù)。 if (!document.layers&&

42、;!document.all)return由于IE與Netscape對(duì)JavaScript的解釋不同，造成瀏覽的效果不同，所以要分別寫(xiě)代碼。這句話(huà)判斷一下用戶(hù)所使用的瀏覽器，如果兩者都不是，就返回。var timer=new Date()定義一個(gè)新的變量，名字為timer,為一個(gè)新的Date的對(duì)象。var hours=Timer.getHours() var minutes=Timer.getMinutes()var seconds=Timer.getSeconds() 分別定義3個(gè)變量，獲得當(dāng)前“小時(shí)”，“分鐘”，“秒”的值。var noon="AM" if (hours

43、>12) noon="PM" hours=hours-12 if (hours=0) hours=12定義一個(gè)名為“noon”的變量，當(dāng)“小時(shí)”數(shù)大于12時(shí)，其值為PM,同時(shí)所得值減12;當(dāng)“小時(shí)”數(shù)小于12時(shí)，其值為AM。if (minutes<=9)minutes="0"+minutesif (seconds<=9) seconds="0"+seconds 如果“分鐘”數(shù)或“秒”數(shù)小于9,則在前面加一個(gè)“0”。myclock="<font color=blue>"+hours+&q

44、uot;:"+minutes+":" +seconds+" "+noon+"</b></font>" 用一個(gè)新變量把“小時(shí)，分，秒”結(jié)合起來(lái)。if (document.layers) document.layers.position.document.write(myclock)document.layers.position.document.close() 如果瀏覽器是Netscape，就輸出myclock,同時(shí)用于IE的代碼就停止執(zhí)行。else if (document.all) positio

45、n.innerHTML=myclock 否則，瀏覽器是IE，就輸出myclock。setTimeout("Time()",1000)每1000毫秒，調(diào)用一次Time函數(shù),即一秒動(dòng)一次。onload="Time()"頁(yè)面裝載時(shí)，調(diào)用Time()函數(shù)。5. 離開(kāi)時(shí)顯示停留時(shí)間1源代碼如下：(這段程序放在<body>與</body>之間)<script language="Javascript"><!-pageOpen = new Date();function stay() pageClose =

46、 new Date();minutes = (pageClose.getMinutes() - pageOpen.getMinutes();seconds = (pageClose.getSeconds() - pageOpen.getSeconds();time = (seconds + (minutes * 60);time = (time + " 秒鐘");alert('您在這兒停留了' + time + '.歡迎下次再來(lái)!'); /-></script>(這段程序放在<body *>正文中)onUnloa

47、d=stay()源程序講解：pageOpen = new Date();定義一個(gè)新的日期對(duì)象，紀(jì)錄開(kāi)始瀏覽頁(yè)面時(shí)間。function stay() 定義一個(gè)函數(shù)。pageClose = new Date(); 定義一個(gè)新的日期對(duì)象，紀(jì)錄結(jié)束瀏覽頁(yè)面時(shí)間。minutes = (pageClose.getMinutes() - pageOpen.getMinutes();“分鐘”變量等于結(jié)束時(shí)間的分鐘數(shù)減去開(kāi)始時(shí)間的分鐘數(shù)。seconds = (pageClose.getSeconds() - pageOpen.getSeconds(); “秒數(shù)”變量等于結(jié)束時(shí)間的秒數(shù)數(shù)減去開(kāi)始時(shí)間的秒數(shù)數(shù)。ti

48、me = (seconds + (minutes * 60);時(shí)間變量等于“秒數(shù)”變量加上“分鐘”變量乘以60，即變?yōu)橐悦爰o(jì)錄。time = (time + " 秒鐘"); alert('您在這兒停留了' + time + '.歡迎下次再來(lái)!');alert()是JavaScript的窗口對(duì)象方法，其功能是彈出一個(gè)具有OK對(duì)話(huà)框并顯示（）中的字符串，告訴在此頁(yè)面停留的時(shí)間。onUnload=stay()頁(yè)面卸載的時(shí)候，調(diào)用stay()函數(shù)。6. 帶開(kāi)關(guān)的時(shí)鐘源代碼如下：(這段程序放在<body>與</body>之間)&

49、lt;script language="JavaScript">var enabled=0; function TOfunc() TO = window.setTimeout( "TOfunc()", 1000); var today = new Date(); document.clock.disp.value = today.toLocaleString(); </script><form name="clock"><input type="text" name="

50、disp" value="" size=20 onFocus="this.blur()" ><br><input type="radio" name="rad" value="off" onClick="if( enabled=1 ) document.clock.disp.value='' clearTimeout( TO ); enabled = 0; " checked>關(guān)<font color="

51、#FFFF99"> </font> <input type="radio" name="rad" value="on" onClick="if( enabled = 0 ) var TO = setTimeout( 'TOfunc()', 1000 ); enabled = 1; " >開(kāi)<font color="#FFFF99"> </font> </form>源程序講解：var enabled=0;定

52、義一個(gè)變量,并賦初值。function TOfunc() TO = window.setTimeout( "TOfunc()", 1000);定義一個(gè)函數(shù)，變量TO的值為一秒，調(diào)用一次TOfunc()函數(shù)。var today = new Date();定義today 為Date對(duì)象的一個(gè)實(shí)例。document.clock.disp.value = today.toLocaleString(); 在文本框中輸出當(dāng)前系統(tǒng)的時(shí)間。<form name="clock"> <input type="text" name=&qu

53、ot;disp" value="" size=20 onFocus="this.blur()" ><br>插入一個(gè)文本框。<input type="radio" name="rad" value="on" onClick="if( enabled = 0 ) var TO = setTimeout( 'TOfunc()', 1000 ); enabled = 1; " >開(kāi)<font color="#FF

54、FF99"></font> 插入一個(gè)單選按鈕。如果選“開(kāi)”的時(shí)候，就調(diào)用TOfunc()函數(shù)。<input type="radio" name="rad" value="off"onClick="if( enabled=1 ) document.clock.disp.value='' clearTimeout( TO ); enabled = 0; " checked>關(guān)<font color="#FFFF99"> </f

55、ont></form> 插入一個(gè)單選按鈕。如果選“關(guān)”的時(shí)候，就取消調(diào)用TOfunc()函數(shù)。7. 數(shù) 字 時(shí) 鐘2源代碼如下：(這段程序放在<head>與</head>之間)<script language="javascript"> <!-var dnc1=new Image(); c1.src="img/c1.gif"c2=new Image(); c2.src="img/c2.gif"c3=new Image(); c3.src="img/c3.gif&qu

56、ot;c4=new Image(); c4.src="img/c4.gif"c5=new Image(); c5.src="img/c5.gif"c6=new Image(); c6.src="img/c6.gif"c7=new Image(); c7.src="img/c7.gif"c8=new Image(); c8.src="img/c8.gif"c9=new Image(); c9.src="img/c9.gif"c0=new Image(); c0.src=&quo

57、t;img/c0.gif"cb=new Image(); cb.src="img/cb.gif"cam=new Image(); cam.src="img/cam.gif"cpm=new Image(); cpm.src="img/cpm.gif"function extract(h,m,s,type)if (!document.images)returnif (h<=9)document.images.a.src=cb.srcdocument.images.b.src=eval("c"+h+&qu

58、ot;.src")else document.images.a.src=eval("c"+Math.floor(h/10)+".src")document.images.b.src=eval("c"+(h%10)+".src")if (m<=9)document.images.d.src=c0.srcdocument.images.e.src=eval("c"+m+".src")else document.images.d.src=eval("c&q

59、uot;+Math.floor(m/10)+".src")document.images.e.src=eval("c"+(m%10)+".src")if (s<=9)document.g.src=c0.srcdocument.images.h.src=eval("c"+s+".src")else document.images.g.src=eval("c"+Math.floor(s/10)+".src")document.images.h.src=e

60、val("c"+(s%10)+".src")if (dn="AM") document.j.src=cam.srcelse document.images.j.src=cpm.srcfunction show()if (!document.images)returnvar Digital=new Date()var hours=Digital.getHours()var minutes=Digital.getMinutes()var seconds=Digital.getSeconds()dn="AM" if (h

61、ours>=12)&&(minutes>=1)|(hours>=13)dn="PM"hours=hours-12if (hours=0)hours=12extract(hours,minutes,seconds,dn)setTimeout("show()",1000)/-></script>(這段程序放在<body *>正文中)onLoad="show()"(這段程序放在<body>與</body>之間)img src="cb.gif&q

62、uot; name="a"><img src="cb.gif" name="b"><img src="colon.gif" name="c"><img src="cb.gif" name="d"><img src="cb.gif" name="e"><img src="colon.gif" name="f">&l

63、t;img src="cb.gif" name="g"><img src="cb.gif" name="h"><img src="cam.gif" name="j">源程序講解：var dn定義一個(gè)新變量。c1=new Image(); c1.src="c1.gif" c2=new Image(); c2.src="c2.gif" c3=new Image(); c3.src="c3.gif"c4=new Image(); c4.src="c4.gif"c5=new Image(); c5.src="c5.gif" c6=new Image(); c6.src="c6.gif"