《基于新信息技術(shù)的JavaScript程序設(shè)計(jì)基礎(chǔ)》課件-第13章

項(xiàng)目13JavaScript綜合應(yīng)用實(shí)例任務(wù)1了解綜合應(yīng)用實(shí)例需求任務(wù)2完成新用戶(hù)注冊(cè)任務(wù)3實(shí)現(xiàn)商品金額和積分自動(dòng)計(jì)算功能任務(wù)4實(shí)現(xiàn)商品數(shù)量增加和減少功能任務(wù)5實(shí)現(xiàn)刪除商品功能

任務(wù)1了解綜合應(yīng)用實(shí)例需求

掌握HTML、CSS與JavaScript的綜合使用，并掌握DIV+CSS的布局技巧。(1)完成新用戶(hù)注冊(cè)頁(yè)面；(2)實(shí)現(xiàn)商品金額自動(dòng)計(jì)算功能；(3)實(shí)現(xiàn)商品數(shù)量增加和減少功能；(4)實(shí)現(xiàn)刪除商品功能。

任務(wù)2完成新用戶(hù)注冊(cè)

1.程序要求在注冊(cè)頁(yè)面驗(yàn)證用戶(hù)輸入內(nèi)容的有效性。當(dāng)文本框獲得焦點(diǎn)時(shí)，提示文本框中應(yīng)該輸入的內(nèi)容；當(dāng)文本框失去焦點(diǎn)時(shí)，驗(yàn)證文本框中的內(nèi)容，并提示錯(cuò)誤信息。本實(shí)例運(yùn)行后的頁(yè)面效果如圖13.1所示。

2.程序編寫(xiě)

圖13.1注冊(cè)頁(yè)面

任務(wù)3實(shí)現(xiàn)商品金額和積分自動(dòng)計(jì)算功能

1.程序要求在購(gòu)物車(chē)頁(yè)面中，根據(jù)商品的數(shù)量和單價(jià)，計(jì)算每行商品的小計(jì)；根據(jù)商品數(shù)量、單價(jià)和積分，計(jì)算商品總價(jià)和積分。本實(shí)例運(yùn)行后的頁(yè)面效果如圖13.2所示。

2.程序編寫(xiě)

圖13.2訂單信息

任務(wù)4實(shí)現(xiàn)商品數(shù)量增加和減少功能

1.程序要求在購(gòu)物車(chē)頁(yè)面中，單擊商品數(shù)量文本框右邊的增加數(shù)量圖標(biāo)“+”或左邊的減少數(shù)量圖標(biāo)“-”，商品的數(shù)量則會(huì)增加1或減少1，但是數(shù)量不能減少為0；商品數(shù)量增加或減少時(shí)，商品小計(jì)以及商品總計(jì)、積分隨之變化。本實(shí)例運(yùn)行后的頁(yè)面效果同上圖13.2所示。

2.程序編寫(xiě)

任務(wù)5實(shí)現(xiàn)刪除商品功能

1.程序要求在購(gòu)物車(chē)頁(yè)面中，單擊“刪除所選”按鈕可以刪除選中的商品；單擊每個(gè)商品后面的“刪除”按鈕可以刪除對(duì)應(yīng)的商品；刪除商品后，商品總計(jì)和積分也同時(shí)改變。

2.程序編寫(xiě)

本實(shí)例運(yùn)行后的頁(yè)面效果如圖13.2所示。

(1)用HTML和CSS編寫(xiě)實(shí)現(xiàn)刪除商品功能的程序，代碼與