《JavaScript程序設(shè)計(jì)教程》項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)

JavaScript程序設(shè)計(jì)教程項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.1功能與技術(shù)分析4.1.1萬(wàn)年歷在一個(gè)萬(wàn)年歷網(wǎng)頁(yè)上，可以選擇不同年份及月份，從而實(shí)現(xiàn)顯示日歷的改變，如圖4-1所示。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.1功能與技術(shù)分析4.1.2功能分析網(wǎng)頁(yè)實(shí)現(xiàn)的功能有：

(1)顯示本年本月的月歷；

(2)在下拉列表中選擇月份；

(3)鼠標(biāo)點(diǎn)擊年份兩邊的雙箭頭，可以改變年份；

(4)鼠標(biāo)點(diǎn)擊日期，可以在月歷下方顯示完整的年-月-日。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.1功能與技術(shù)分析4.1.3技術(shù)分析除了JavaScript基本知識(shí)外，還需掌握的知識(shí)點(diǎn)有：

(1)JavaScript的循環(huán)結(jié)構(gòu)，以實(shí)現(xiàn)將日期顯示在表格中。

(2)JavaScript的日期對(duì)象，實(shí)現(xiàn)日期的正確顯示。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)

JavaScript提供了豐富多彩的設(shè)計(jì)循環(huán)結(jié)構(gòu)的語(yǔ)句，包括for語(yǔ)句或計(jì)數(shù)循環(huán)、while語(yǔ)句和do…while語(yǔ)句、forin語(yǔ)句等。其中，for語(yǔ)句按指定的次數(shù)執(zhí)行循環(huán)體，而while語(yǔ)句和do…while語(yǔ)句則是在給定的條件滿足時(shí)執(zhí)行循環(huán)體。無(wú)論何種類型的循環(huán)結(jié)構(gòu)，其特點(diǎn)都是：循環(huán)體執(zhí)行與否及其執(zhí)行次數(shù)多少都必須視其循環(huán)類型與條件而定，且必須確保循環(huán)體的重復(fù)執(zhí)行能在適當(dāng)?shù)臅r(shí)候得以終止（即非死循環(huán)）。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.1

while和do-while循環(huán)語(yǔ)句1.前測(cè)型循環(huán)結(jié)構(gòu)

while語(yǔ)句屬前測(cè)型循環(huán)結(jié)構(gòu)，首先判斷條件，根據(jù)條件決定是否執(zhí)行循環(huán)，執(zhí)行循環(huán)的最少次數(shù)為0。其語(yǔ)法結(jié)構(gòu)如下:while(條件){語(yǔ)句塊;}

若條件表達(dá)式為真，則執(zhí)行語(yǔ)句塊（循環(huán)體）內(nèi)包含的語(yǔ)句。注意：在循環(huán)體中應(yīng)包含更改條件的語(yǔ)句，否則循環(huán)一直進(jìn)行下去，成為“死循環(huán)”。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.1

while和do-while循環(huán)語(yǔ)句1.前測(cè)型循環(huán)結(jié)構(gòu)【例4-1】輸入一個(gè)正整數(shù)，利用while循環(huán)判斷是否素?cái)?shù)。分析：所謂“素?cái)?shù)”是指除了1和該數(shù)本身，不能被其它整數(shù)整除的數(shù)。判斷一個(gè)自然數(shù)n（n≥3）是否素?cái)?shù)，只要依次用2～作除數(shù)去除n，若n不能被其中任何一個(gè)數(shù)整除，則n即為素?cái)?shù)，如圖4-2所示。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.1

while和do-while循環(huán)語(yǔ)句1.前測(cè)型循環(huán)結(jié)構(gòu)【例4-1】輸入一個(gè)正整數(shù)，利用while循環(huán)判斷是否素?cái)?shù)。

(1)編寫網(wǎng)頁(yè)界面，使用文本框?qū)ο笸瓿蓴?shù)值的輸入，使用按鈕接受命令項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.1

while和do-while循環(huán)語(yǔ)句1.前測(cè)型循環(huán)結(jié)構(gòu)【例4-1】輸入一個(gè)正整數(shù)，利用while循環(huán)判斷是否素?cái)?shù)。

(2)在<scripttype="text/javascript"></script>標(biāo)記中添加單擊按鈕的事件處理器test()函數(shù)其中，isNaN()函數(shù)用于檢查其參數(shù)是否是非數(shù)字值。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.1

while和do-while循環(huán)語(yǔ)句1.前測(cè)型循環(huán)結(jié)構(gòu)【例4-1】輸入一個(gè)正整數(shù)，利用while循環(huán)判斷是否素?cái)?shù)。另外，事件處理器test()函數(shù)調(diào)用了判斷素?cái)?shù)的函數(shù)su(x)：該函數(shù)利用while循環(huán)依次用2～作除數(shù)去除x，若有一個(gè)被整除了，就不是素?cái)?shù)，返回false；否則是素?cái)?shù)，返回true。

項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.1

while和do-while循環(huán)語(yǔ)句在某些情況下，while循環(huán)大括號(hào)內(nèi)的語(yǔ)句塊可能一次也不被執(zhí)行，因?yàn)閷?duì)邏輯條件表達(dá)式的運(yùn)算在執(zhí)行語(yǔ)句塊之前。若邏輯條件表達(dá)式運(yùn)算結(jié)果為假，則程序直接跳過(guò)循環(huán)而一次也不執(zhí)行或語(yǔ)句塊。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.1

while和do-while循環(huán)語(yǔ)句2.后測(cè)型循環(huán)結(jié)構(gòu)若希望至少執(zhí)行一次循環(huán)體，可改用do…while語(yǔ)句，其基本語(yǔ)法結(jié)構(gòu)如下：do{語(yǔ)句塊;}while(條件);首先執(zhí)行語(yǔ)句塊（循環(huán)體），然后判斷條件，根據(jù)條件決定是否繼續(xù)執(zhí)行循環(huán)，因此執(zhí)行循環(huán)的最少次數(shù)為1。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.1

while和do-while循環(huán)語(yǔ)句2.后測(cè)型循環(huán)結(jié)構(gòu)【例4-2】輸入兩個(gè)正整數(shù)，求它們的最大公約數(shù)。分析：求最大公約數(shù)可以用“輾轉(zhuǎn)相除法”，方法如下：①以大數(shù)m作被除數(shù)，小數(shù)n做除數(shù)，相除后余數(shù)為r。②若r≠0，則m←n，n←r，繼續(xù)相除得到新的r。若仍有r≠0，則重復(fù)此過(guò)程，直到r

=

0為止。③最后的n就是最大公約數(shù)。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.1

while和do-while循環(huán)語(yǔ)句2.后測(cè)型循環(huán)結(jié)構(gòu)【例4-2】輸入兩個(gè)正整數(shù)，求它們的最大公約數(shù)。

(1)編寫網(wǎng)頁(yè)界面，使用文本框?qū)ο笸瓿蓴?shù)值的輸入，使用按鈕接受命令其中，“計(jì)算”按鈕的單擊鼠標(biāo)事件處理器直接調(diào)用計(jì)算公約數(shù)test(m,n)函數(shù)，兩個(gè)參數(shù)分別是兩個(gè)文本框輸入的數(shù)值。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.1

while和do-while循環(huán)語(yǔ)句2.后測(cè)型循環(huán)結(jié)構(gòu)【例4-2】輸入兩個(gè)正整數(shù)，求它們的最大公約數(shù)。

(2)在<scripttype="text/javascript"></script>標(biāo)記中添加計(jì)算最大公約數(shù)test(m,n)函數(shù)test()函數(shù)使用do…while循環(huán)實(shí)現(xiàn)參數(shù)的輾轉(zhuǎn)相除，最后的余數(shù)就是最大公約數(shù)。在瀏覽器中打開JavaScript程序，輸入兩個(gè)整數(shù)，計(jì)算結(jié)果如圖4-3所示。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.2

for循環(huán)語(yǔ)句在不知道循環(huán)內(nèi)執(zhí)行多少次語(yǔ)句時(shí)，宜用while循環(huán)。若知道要執(zhí)行的循環(huán)次數(shù)時(shí)，則最好使用for循環(huán)。

與while循環(huán)不同，for循環(huán)使用一個(gè)循環(huán)變量，每重復(fù)一次循環(huán)之后，循環(huán)變量的值就會(huì)自動(dòng)增加或者減少。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.2

for循環(huán)語(yǔ)句for循環(huán)語(yǔ)句按照指定的循環(huán)次數(shù)，重復(fù)執(zhí)行循環(huán)體內(nèi)語(yǔ)句（或語(yǔ)句塊），其語(yǔ)法基本結(jié)構(gòu)如下：for(循環(huán)變量賦初值;循環(huán)結(jié)束條件;循環(huán)變量更新){語(yǔ)句塊;}其中“循環(huán)結(jié)束條件”為控制循環(huán)結(jié)束與否的條件表達(dá)式，程序每執(zhí)行完一次循環(huán)體內(nèi)語(yǔ)句（或語(yǔ)句塊），均要計(jì)算該表達(dá)式是否為真，若結(jié)果為真，則繼續(xù)運(yùn)行下一次循環(huán)體內(nèi)語(yǔ)句（或語(yǔ)句塊）；若結(jié)果為假，則跳出循環(huán)體。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.2

for循環(huán)語(yǔ)句for循環(huán)語(yǔ)句按照指定的循環(huán)次數(shù)，重復(fù)執(zhí)行循環(huán)體內(nèi)語(yǔ)句（或語(yǔ)句塊），其語(yǔ)法基本結(jié)構(gòu)如下：for(循環(huán)變量賦初值;循環(huán)結(jié)束條件;循環(huán)變量更新){語(yǔ)句塊;}“循環(huán)變量更新”指循環(huán)變量更新的方式，程序每執(zhí)行完一次循環(huán)體內(nèi)語(yǔ)句（或語(yǔ)句塊），均需要更新循環(huán)變量。上述循環(huán)控制參數(shù)之間使用分號(hào)“;”隔開。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.2

for循環(huán)語(yǔ)句【例4-3】驗(yàn)證“哥德巴赫猜想”。

1742年6月，德國(guó)數(shù)學(xué)家哥德巴赫（C.Goldbah1690-1764）在給彼得堡的大數(shù)學(xué)家歐拉的信中提出一個(gè)問(wèn)題：

任何大于6的偶數(shù)均可以表示為兩個(gè)素?cái)?shù)之和嗎？歐拉復(fù)信道：“任何大于6的偶數(shù)均可以表示為兩個(gè)素?cái)?shù)之和，這一猜想我還不能證明，但我確信無(wú)疑地認(rèn)為這是完全正確的定理?！?/p>

這就是至今尚未被證明的哥德巴赫猜想。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.2

for循環(huán)語(yǔ)句【例4-3】驗(yàn)證“哥德巴赫猜想”。雖然證明或推翻“哥德巴赫猜想”決非易事，但是利用計(jì)算機(jī)可以對(duì)任意的具體偶數(shù)進(jìn)行驗(yàn)證。算法如下：對(duì)于任意偶數(shù)n，先求出小于n的一個(gè)素?cái)?shù)x，令y

=n

–

x，判斷y是否素?cái)?shù)。如果y也是素?cái)?shù)，則輸出n

=x

+y，否則另取一個(gè)小于n的素?cái)?shù)x而找y。直至x，y均為素?cái)?shù)為止。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.2

for循環(huán)語(yǔ)句【例4-3】驗(yàn)證“哥德巴赫猜想”。

(1)編寫網(wǎng)頁(yè)界面，使用文本框?qū)ο笸瓿蓴?shù)值的輸入，使用按鈕接受命令

(2)在<head></head>標(biāo)記中添加javascript代碼，其中編寫將偶數(shù)分解為兩個(gè)素?cái)?shù)之和的test(n)函數(shù)，該函數(shù)調(diào)用例4-1中的素?cái)?shù)判斷函數(shù)su(x)：

(3)在瀏覽器中打開JavaScript程序，輸入任意不小于6的偶數(shù)，計(jì)算結(jié)果如圖4-4所示。注意：當(dāng)輸入的偶數(shù)較大時(shí)，程序運(yùn)行時(shí)間可能很長(zhǎng)。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.2

for循環(huán)語(yǔ)句for、while、do…while三種循環(huán)語(yǔ)句具有基本相同的功能，在實(shí)際編程過(guò)程中，應(yīng)根據(jù)實(shí)際需要和本著使程序簡(jiǎn)單易懂的原則來(lái)選擇到底使用哪種循環(huán)語(yǔ)句。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.3循環(huán)的嵌套通常把循環(huán)體內(nèi)不含循環(huán)語(yǔ)句的循環(huán)稱為單重（層）循環(huán)，而把循環(huán)體內(nèi)含有循環(huán)語(yǔ)句的循環(huán)稱為多重循環(huán)，或稱循環(huán)的嵌套。根據(jù)嵌套的層數(shù)有二重循環(huán)、三重循環(huán)，…，多重循環(huán)等等。上面介紹的循環(huán)結(jié)構(gòu)既可以單獨(dú)嵌套，也可以互相嵌套，但是要注意內(nèi)外循環(huán)不能交叉。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.3循環(huán)的嵌套【例4-4】可以設(shè)置行、列數(shù)的表格。在實(shí)際應(yīng)用中，常常需要改變顯示表格的行、列數(shù)，僅使用HTML語(yǔ)句就不行了，此時(shí)必須使用JavaScript命令。

(1)編寫網(wǎng)頁(yè)界面，使用文本框?qū)ο笸瓿蓴?shù)值的輸入，使用按鈕接受命令

(2)在<head></head>標(biāo)記中添加將生成表格的init(rows,cols)函數(shù)，該函數(shù)最初由頁(yè)面讀入時(shí)調(diào)用，之后可以被“建立表格”按鈕的單擊事件調(diào)用

(3)在瀏覽器中打開JavaScript程序，顯示如圖4-5所示。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.2

JavaScript的控制結(jié)構(gòu)二：循環(huán)結(jié)構(gòu)4.2.4使用break和continue進(jìn)行循壞控制在循環(huán)語(yǔ)句中，某些情況下需要跳出循環(huán)或者跳過(guò)循環(huán)體內(nèi)剩余語(yǔ)句，而直接執(zhí)行下一次循環(huán)，此時(shí)需要通過(guò)break和continue語(yǔ)句來(lái)實(shí)現(xiàn)。break語(yǔ)句的作用是立即跳出循環(huán)，continue語(yǔ)句的作用是停止正在進(jìn)行的循環(huán)，而直接進(jìn)入下一次循環(huán)。例4-3中test()函數(shù)的for循環(huán)，共需要循環(huán)n/2次，當(dāng)找到n的一對(duì)素?cái)?shù)分解后已無(wú)必要繼續(xù)，可以使用break跳出循環(huán)，直接輸出結(jié)果。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象在Web應(yīng)用中，經(jīng)常碰到需要處理時(shí)間和日期的情況。JavaScript沒(méi)有一個(gè)基本的日期數(shù)據(jù)類型，JavaScript內(nèi)置了核心對(duì)象Date，該對(duì)象可以表示從毫秒到年的所有時(shí)間和日期，并提供了一系列操作時(shí)間和日期的方法。在深入了解Date對(duì)象前，首先了解兩個(gè)有關(guān)時(shí)間標(biāo)準(zhǔn)的概念：

GMT：格林尼治標(biāo)準(zhǔn)時(shí)間的英文縮寫，指位于倫敦郊區(qū)的皇家格林尼治天文臺(tái)的標(biāo)準(zhǔn)時(shí)間，該地點(diǎn)的經(jīng)線被定義為本初子午線。理論上來(lái)說(shuō)，格林尼治標(biāo)準(zhǔn)時(shí)間的正午是指當(dāng)太陽(yáng)橫穿格林尼治子午線時(shí)的時(shí)間。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象在Web應(yīng)用中，經(jīng)常碰到需要處理時(shí)間和日期的情況。JavaScript沒(méi)有一個(gè)基本的日期數(shù)據(jù)類型，JavaScript內(nèi)置了核心對(duì)象Date，該對(duì)象可以表示從毫秒到年的所有時(shí)間和日期，并提供了一系列操作時(shí)間和日期的方法。在深入了解Date對(duì)象前，首先了解兩個(gè)有關(guān)時(shí)間標(biāo)準(zhǔn)的概念：UTC：世界協(xié)調(diào)時(shí)間的英文縮寫，是由國(guó)際無(wú)線電咨詢委員會(huì)規(guī)定和推薦，并由國(guó)際時(shí)間局(BIH)負(fù)責(zé)保持的以秒為基礎(chǔ)的時(shí)間標(biāo)度，相當(dāng)于本初子午線上的平均太陽(yáng)時(shí)。由于地球自轉(zhuǎn)速度不規(guī)則，目前采用由原子鐘授時(shí)的UTC作為時(shí)間標(biāo)準(zhǔn)。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象在大多數(shù)情況下，可以假定GMT時(shí)間和UTC時(shí)間一致，電腦的時(shí)鐘嚴(yán)格按照GMT時(shí)間運(yùn)行。

JavaScript腳本中采用UNIX系統(tǒng)存儲(chǔ)時(shí)間的人工方式，即以毫秒數(shù)存儲(chǔ)內(nèi)部日期。同時(shí)，腳本在讀取當(dāng)前日期和時(shí)間時(shí)，依賴于客戶端電腦的時(shí)鐘，如果客戶端電腦時(shí)鐘有誤，將造成一定的問(wèn)題。注意：為方便表述，將GMT時(shí)間1970年1月1日0點(diǎn)定義為GMT標(biāo)準(zhǔn)零點(diǎn)，下同。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象4.3.1生成Date對(duì)象的實(shí)例通常需要顯式地創(chuàng)建Date對(duì)象，創(chuàng)建新的Date對(duì)象使用關(guān)鍵字new和Date構(gòu)造函數(shù)。

Date對(duì)象的構(gòu)造函數(shù)通過(guò)可選的參數(shù)，可生成表示過(guò)去、現(xiàn)在和將來(lái)的Date對(duì)象。其構(gòu)造方式有四種，分別如下：varMyDate=newDate();varMyDate=newDate(毫秒數(shù));varMyDate=newDate(日期時(shí)間字符串);varMyDate=newDate(年,月,日,時(shí),分,秒,毫秒);項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象4.3.1生成Date對(duì)象的實(shí)例varMyDate=newDate();varMyDate=newDate(毫秒數(shù));varMyDate=newDate(日期時(shí)間字符串);varMyDate=newDate(年,月,日,時(shí),分,秒,毫秒);語(yǔ)句1生成一個(gè)空的Date對(duì)象實(shí)例MyDate，可在后續(xù)操作中通過(guò)Date對(duì)象提供的諸多方法來(lái)設(shè)定其日期和時(shí)間，如果不設(shè)定則代表客戶端當(dāng)前日期和時(shí)間。語(yǔ)句2的構(gòu)造函數(shù)中傳入唯一參數(shù)“毫秒數(shù)”，表示構(gòu)造與GMT標(biāo)準(zhǔn)零點(diǎn)相距指定毫秒的Date對(duì)象實(shí)例MyDate。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象4.3.1生成Date對(duì)象的實(shí)例varMyDate=newDate();varMyDate=newDate(毫秒數(shù));varMyDate=newDate(日期時(shí)間字符串);varMyDate=newDate(年,月,日,時(shí),分,秒,毫秒);語(yǔ)句3構(gòu)造一個(gè)用“日期時(shí)間字符串”指定的Date對(duì)象實(shí)例MyDate，其中日期時(shí)間字符串符合特定的格式。語(yǔ)句4通過(guò)具體的日期屬性，如年、月等構(gòu)造指定的Date對(duì)象實(shí)例MyDate。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象4.3.1生成Date對(duì)象的實(shí)例【例4-5】用不同的構(gòu)造方式生成Date對(duì)象的實(shí)例，體會(huì)“毫秒數(shù)”、“日期時(shí)間字符串”、“年,月,日,時(shí),分,秒,毫秒”的形式。打開網(wǎng)頁(yè)，直接單擊“日期測(cè)試”按鈕，程序使用第一種格式生成對(duì)象：MyDate=newDate();并輸出該Date對(duì)象表示的時(shí)間與GMT標(biāo)準(zhǔn)零點(diǎn)相距指定毫秒數(shù)、該對(duì)象所代表的時(shí)間的字符串，如圖所示。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象4.3.1生成Date對(duì)象的實(shí)例【例4-5】用不同的構(gòu)造方式生成Date對(duì)象的實(shí)例，體會(huì)“毫秒數(shù)”、“日期時(shí)間字符串”、“年,月,日,時(shí),分,秒,毫秒”的形式。復(fù)制第二個(gè)文本框中的毫秒數(shù)，并粘貼到第一個(gè)文本框中，單擊“日期測(cè)試”按鈕，程序使用第二種格式生成對(duì)象：MyDate=newDate(parseFloat(x));此時(shí)生成的Date對(duì)象所表示的時(shí)間與前者相同，稍微修改毫秒數(shù)值，得到的時(shí)間字符串不變，如圖所示。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象4.3.1生成Date對(duì)象的實(shí)例【例4-5】用不同的構(gòu)造方式生成Date對(duì)象的實(shí)例，體會(huì)“毫秒數(shù)”、“日期時(shí)間字符串”、“年,月,日,時(shí),分,秒,毫秒”的形式。如果復(fù)制第三個(gè)文本框中的時(shí)間字符串粘貼到第一個(gè)文本框中，得到的時(shí)間則完全相同。如果在第一個(gè)文本框中輸入具體的日期和時(shí)間，則使用第四種格式生成相應(yīng)的Date對(duì)象，如圖4-7所示。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象4.3.1生成Date對(duì)象的實(shí)例【例4-5】用不同的構(gòu)造方式生成Date對(duì)象的實(shí)例，體會(huì)“毫秒數(shù)”、“日期時(shí)間字符串”、“年,月,日,時(shí),分,秒,毫秒”的形式。通過(guò)程序結(jié)果可知，上述四種構(gòu)造Date對(duì)象實(shí)例的方式都能構(gòu)造同樣的日期對(duì)象。注意：歐美時(shí)間制中，星期及月份數(shù)都從0開始計(jì)數(shù)。如星期中第0天為Sunday，第7天為Saturday；月份中的第0月為January，第11月為December。但月的天數(shù)從1開始計(jì)數(shù)。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象4.3.2日期與時(shí)間的獲取

Date對(duì)象以目標(biāo)日期與GMT標(biāo)準(zhǔn)零點(diǎn)之間的毫秒數(shù)來(lái)儲(chǔ)存該日期，給程序員操作Date對(duì)象帶來(lái)一定的難度。為解決這個(gè)難題，JavaScript提供大量的方法而不是通過(guò)直接設(shè)置或讀取屬性的方式來(lái)設(shè)置和提取日期各字段，這些方法將毫秒數(shù)轉(zhuǎn)化為對(duì)用戶友好的格式。常用的方法如表4-1所示。getDate()返回date對(duì)象中的月份中的天數(shù)(1-31)getDay()返回date對(duì)象中的星期中的天數(shù)(0-6)getFullYear()返回date對(duì)象中的四位數(shù)年份getHours()返回date對(duì)象中的小時(shí)數(shù)(0-23)getMilliseconds()返回date對(duì)象中的毫秒數(shù)(0-999)getMinutes()返回date對(duì)象中的分鐘數(shù)(0-59)getMonth()返回date對(duì)象中的月份數(shù)(0-11)getSeconds()返回date對(duì)象中的秒數(shù)(0-59)getTime()返回date對(duì)象的時(shí)間戳表示法(毫秒表示)getTimezoneOffset()返回本地時(shí)間與用UTC表示當(dāng)前日期的時(shí)間差，以分鐘為單位項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象4.3.2日期與時(shí)間的獲取【例4-6】電子時(shí)鐘的例子，體會(huì)獲取日期與時(shí)間的方法。程序的界面很簡(jiǎn)單程序運(yùn)行結(jié)果如圖4-8所示，并根據(jù)客戶端時(shí)鐘及時(shí)更新文本框內(nèi)容。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象4.3.2日期與時(shí)間的獲取【例4-6】電子時(shí)鐘的例子，體會(huì)獲取日期與時(shí)間的方法。上述代碼主要包括如下內(nèi)容：

(1)MyTimer()函數(shù)：該函數(shù)首先構(gòu)造空的Date對(duì)象實(shí)例nowTime，用于保存當(dāng)前系統(tǒng)的日期信息，然后通過(guò)Date對(duì)象的各種提取日期與時(shí)間信息的方法，獲得如年、月、日、時(shí)、分、秒等信息，并更改輸出格式；啟動(dòng)定時(shí)器timerID以及時(shí)更新Date對(duì)象實(shí)例nowTime；項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象4.3.2日期與時(shí)間的獲取【例4-6】電子時(shí)鐘的例子，體會(huì)獲取日期與時(shí)間的方法。上述代碼主要包括如下內(nèi)容：

(2)MyWeek(week)函數(shù)：該函數(shù)將以數(shù)值參數(shù)傳入的星期轉(zhuǎn)化為中文表示的星期，并把結(jié)果以字符串的形式返回；上述日期都是客戶端日期，Date對(duì)象也提供了基于UTC世界標(biāo)準(zhǔn)時(shí)間提取目標(biāo)日期中各字段的諸多方法，如getUTCDay()、getUTCSeconds()等。這些方法的使用過(guò)程與實(shí)例中的相同，只不過(guò)操作的基礎(chǔ)不是客戶端日期，而是UTC世界標(biāo)準(zhǔn)時(shí)間。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象4.3.3日期與時(shí)間的設(shè)置在實(shí)際應(yīng)用中，通常需要在原有的日期基礎(chǔ)上得到新的日期，如電影中的“二十年后”等。Date對(duì)象提供一系列的設(shè)置日期與時(shí)間的方法，常用的方法如表4-2所示。setDate()設(shè)置date對(duì)象中月份的一天，并返回date對(duì)象距1970年1月1日午夜之間的毫秒數(shù)(時(shí)間戳)setFullYear()設(shè)置date對(duì)象中的年份，月份和天，并返回date對(duì)象距1970年1月1日午夜之間的毫秒數(shù)(時(shí)間戳)setHours()設(shè)置date對(duì)象的小時(shí)，分鐘，秒和毫秒，并返回date對(duì)象距1970年1月1日午夜之間的毫秒數(shù)(時(shí)間戳)setMilliseconds()設(shè)置date對(duì)象的毫秒數(shù)，并返回date對(duì)象距1970年1月1日午夜之間的毫秒數(shù)(時(shí)間戳)setMinutes()設(shè)置date對(duì)象的分鐘，秒，毫秒，并返回date對(duì)象距1970年1月1日午夜之間的毫秒數(shù)(時(shí)間戳)setMonth()設(shè)置date對(duì)象中月份，天，并返回date對(duì)象距1970年1月1日午夜之間的毫秒數(shù)(時(shí)間戳)setSeconds()設(shè)置date對(duì)象中月份的一天，并返回date對(duì)象距1970年1月1日午夜之間的毫秒數(shù)(時(shí)間戳)setTime()使用毫秒數(shù)設(shè)置date對(duì)象，并返回date對(duì)象距1970年1月1日午夜之間的毫秒數(shù)(時(shí)間戳)項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象4.3.3日期與時(shí)間的設(shè)置【例4-7】設(shè)置Date對(duì)象的例子，體會(huì)設(shè)置日期與時(shí)間的方法。程序的界面較簡(jiǎn)單，使用了表格規(guī)范輸出項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象4.3.4日期與時(shí)間的輸出

Date對(duì)象提供如toString()、toGMTString()、toLocalString()等方法將日期轉(zhuǎn)換為字符串，而不需要開發(fā)人員編寫專門的函數(shù)實(shí)現(xiàn)該功能。toDateString()返回date對(duì)象的日期部分的字符串表示toTimeString()返回date對(duì)象的時(shí)間部分的字符串表示toString()返回date對(duì)象的字符串表示toLocaleDateString返回date對(duì)象的日期部分的本地化字符串表示toLocaleTimeString返回date對(duì)象的時(shí)間部分的本地化字符串表示toLocaleString返回date對(duì)象的本地化字符串表示toGMTString()返回date對(duì)象的格林威治時(shí)間(GMT)的字符串表示toUTCString返回date對(duì)象的世界標(biāo)準(zhǔn)時(shí)間(UTC)的字符串表示項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象4.3.4日期與時(shí)間的輸出如下代碼：functionMyTest(){

varMyDate=newDate();

varmsg="日期與時(shí)間轉(zhuǎn)化為字符串:\n\n";

msg+="本地日期toString():"+MyDate.toString()+"\n";

msg+="本地日期toLocalString():"+MyDate.toLocaleString()+"\n";

msg+="GMT世界時(shí)間toGMTString():"+MyDate.toGMTString()+"\n";

msg+="UTC世界時(shí)間toUTCString():"+MyDate.toUTCString()+"\n";

alert(msg);}運(yùn)行結(jié)果如圖4-10所示。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象4.3.4日期與時(shí)間的輸出從程序結(jié)果可以看出，toString()和toLocaleString()方法返回表示客戶端日期和時(shí)間的字符串，但格式大不相同。

實(shí)際上，toLocaleString()方法返回字符串的格式由客戶設(shè)置的日期和時(shí)間格式?jīng)Q定，而toString()方法返回的字符串遵循以下格式：Thu

Jan2612:12:34UTC+08002012由于目前UTC已經(jīng)取代GMT作為新的世界時(shí)間標(biāo)準(zhǔn)，后面兩種將日期轉(zhuǎn)化為字符串的方法toGMTString()和toUTCString()返回的字符串格式、內(nèi)容均相同。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.3JavaScript的Date對(duì)象4.3.4日期與時(shí)間的輸出【例4-8】綜合利用Date對(duì)象的方法設(shè)計(jì)的最簡(jiǎn)格式計(jì)時(shí)器。按照“小時(shí):分鐘:秒鐘”格式輸出通常需要分別獲取時(shí)間變量的小時(shí)數(shù)、分鐘數(shù)和秒鐘數(shù)，還要判斷分鐘和秒鐘為幾位數(shù)，并做處理。使用綜合利用Date對(duì)象的格式輸出等方法，可以非常簡(jiǎn)單地完成。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.4萬(wàn)年歷的設(shè)計(jì)4.4.1網(wǎng)頁(yè)萬(wàn)年歷的界面設(shè)計(jì)萬(wàn)年歷的界面設(shè)計(jì)主要分為兩個(gè)部分：日歷與選定日期顯示區(qū)，其中的日歷顯示區(qū)使用表格實(shí)現(xiàn)，選定日期顯示區(qū)使用網(wǎng)頁(yè)區(qū)塊<span></span>實(shí)現(xiàn)。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.4萬(wàn)年歷的設(shè)計(jì)4.4.1網(wǎng)頁(yè)萬(wàn)年歷的界面設(shè)計(jì)萬(wàn)年歷的界面設(shè)計(jì)主要分為兩個(gè)部分：日歷與選定日期顯示區(qū)，其中的日歷顯示區(qū)使用表格實(shí)現(xiàn)，選定日期顯示區(qū)使用網(wǎng)頁(yè)區(qū)塊<span></span>實(shí)現(xiàn)。而日歷顯示區(qū)又分為“年份、月份選擇區(qū)”、“星期標(biāo)題行”和“月歷顯示區(qū)”三部分，前兩部分由兩個(gè)子表實(shí)現(xiàn)，第三個(gè)使用網(wǎng)頁(yè)區(qū)塊<span></span>實(shí)現(xiàn)。

編寫步驟如下：年份、月份選擇區(qū)星期標(biāo)題行

月歷顯示區(qū)選定日期顯示項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.4萬(wàn)年歷的設(shè)計(jì)4.4.1網(wǎng)頁(yè)萬(wàn)年歷的界面設(shè)計(jì)

(1)頁(yè)面包含一個(gè)三行一列的主表和一個(gè)<span>區(qū)塊

(2)在主表的第一行僅有的單元格里增加一個(gè)一行四列的子表，分別放置左方向、年份值、右方向、月份選擇列表框；第二行的僅有單元格里增加一個(gè)一行七列的子表，放置一周中的七個(gè)星期名。其中代碼：onload="init()"用于讀入網(wǎng)頁(yè)后調(diào)用初始化函數(shù)。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.4萬(wàn)年歷的設(shè)計(jì)4.4.2網(wǎng)頁(yè)萬(wàn)年歷的應(yīng)用邏輯設(shè)計(jì)在萬(wàn)年歷的應(yīng)用邏輯設(shè)計(jì)中，最重要的步驟是根據(jù)選定的年份和月份確定相應(yīng)的日歷排放方式，其本質(zhì)是選定月份的首日位置確定，即首日是周幾的確定。其應(yīng)用邏輯流程圖如圖4-13所示。項(xiàng)目4：萬(wàn)年歷的設(shè)計(jì)4.4萬(wàn)年歷的設(shè)計(jì)4.4.2網(wǎng)頁(yè)萬(wàn)年歷的應(yīng)用邏輯設(shè)計(jì)在<head></head>標(biāo)記中添加<script>標(biāo)記，其中編寫JavaScript代碼。

(1)網(wǎng)頁(yè)的初始化函數(shù)init：function

init(){

SetMonth.options[The_Month