電子購物web設計基礎論文-資料下載頁
2025-05-19 12:48本頁面
【導讀】題目電子購物。學院。專業(yè)。學生姓名。學號。班級。指導教師。20xx年1月3日。目錄
【正文】 數(shù)字）及向訂單 ()傳送所購產(chǎn)品信息并計量產(chǎn)品價格與郵遞費用： function puter() { if(==true) { var input=prompt(請輸入選購數(shù)量 )。 if(input==||input==undefined||input==null) { =false。 alert(請輸入數(shù)據(jù) )。 return false。 } else if(isnumber(input)==true){ postage+=eval(20xx*eval(input))*。 goods+=eval(20xx*eval(input))。 +=\n 臺式電腦：+input+\n。 =postage。 =goods。 19 =eval(.) +eval()。 return true。 } } } 所遇困難及解決辦法： 此部分難點在于如何向訂單 ()傳送所購產(chǎn)品信息并計量產(chǎn)品價格與郵遞費用，開始覺得很是麻煩，在網(wǎng)上查閱多次試驗也未成功，最后在從圖書館所借閱的資料中找到相似案例，終于解決此問題。 （ 2） 產(chǎn)品圖片放大與回原功能代碼，兩部分代碼類似，這里以放大功能代碼為例。此函數(shù)功能為鼠標進入圖片區(qū)域時圖片放大通過獲得 id 屬性修改 css 文件實現(xiàn)。 function bigger() //鼠標在圖像上時圖像變大 { var cpu= (39。cpu39。)。 //判斷鼠標是否在控件 var lap= (39。lap39。)。 var sc= (39。sc39。)。 if(()) { = 39。252px39。 = 39。200px39。 } if(()) { = 39。252px39。 = 39。200px39。 }if(()) { 20 = 39。252px39。 = 39。200px39。 } } 所遇困難及解決辦法： 這部分代碼通過網(wǎng)上查閱而得，最初計劃每個產(chǎn)品的放大與回原功能各寫一個函數(shù)，但此種方法使代碼出現(xiàn)過多冗余，故放棄最初計劃，再次網(wǎng)上查閱找到定義 var數(shù)據(jù)類型，獲得每個產(chǎn)品 id，使相同功能在同一函數(shù)中實現(xiàn)。在隨后（ 2（ 1）處）產(chǎn)品信息頁面中的鼠標進入圖片區(qū)域時其他圖片發(fā)生響應的功能所需代碼與此類似，但用這種方法就不行了，只能各寫一個函數(shù)。 2，臺式電腦 (),筆記本電腦（ ），顯示器（ ）三種頁面功能多為相似，故一并處理，以臺式電腦 ()為例 關鍵代碼為一處： （ 1） 鼠標進入圖片時其他圖片發(fā)生響應的代碼，共三處響應事件，功能類似，只以一處為例： function overParameter() { (39。parameter39。).src=。 (39。parts39。).src=。 (39。service39。).src=。 (39。info39。).src=。 } 所遇困難及解決辦法： 這里最大的問題是繁瑣的圖片截圖以及圖片順序處理，最初網(wǎng)站頁面設計過于簡單，因此瀏覽其他相似網(wǎng)站，模仿其功能，而后是繁瑣的截圖與處理，耗時耗力。 3，訂單（ ） 關鍵代碼為一處： （ 1） 對物流所需信息的驗證，多用正則表達式： function getCheck() { 21 var name = (name).value。 //姓名 var phone = (phone).value。 //電話 var address = (address).value。 //地址 var zip= (zip).value。 //郵編 var cardnum= (cardnum).value。 //銀行賬號 var regPhone=/^((\(\d{2,3}\))|(\d{3}\))?13\d{9}$/g。 //電話正則驗證 var regZip=/^[19]{1}[09]{5}$/。 //郵編正則驗證 var regBank=/^(\d{4}[\s\]?){4,5}\d{3}$/。 //19或 23位的銀行賬號驗證 if(name==||name==null){ (name).value=用戶名不能為空！ 。 } if(!(phone)){ (phone).value=號碼錯誤！ 。 } if(address==||address==null){ (address).value=地址不能為空！ 。 } if(!(zip)){ (zip).value=郵編錯誤！ 。 } if(!(cardnum)){ (cardnum).value=賬號錯誤！ 。 } } 22 所遇困難及解決辦法： 最初對正則表達式知識不了解，查閱圖書資料也不甚了了，最后從網(wǎng)上挨個搜索各信息的正則表達式驗證，解決問題。但在點擊提交按鈕時頁面出現(xiàn)信息閃滅問題，網(wǎng)上查閱后在點擊事件中添加 return false。時方解決問題。 onclick=getCheck()。return false。 (注： , 頁面無實用功能，故不詳述 ) 23 第四章 總結 通過本次開發(fā)， 對 JavaScript 的相關知識有了更詳細的認知 ， 但更明白仍有許多知識未涉足、了解，同時體會到網(wǎng)頁設計看似簡單實際做時的困難與繁復。 此項目的優(yōu)點和不足 在于網(wǎng)頁設計的美觀性、用戶體驗性、后臺、安全的處理多有待解決。代碼編寫時沒有良好的編程習慣，使他人看來代碼層次不清晰，難于理解與閱讀。 今后的改進方向 對網(wǎng)頁后臺進行處 理以及學習動態(tài)網(wǎng)頁的處理與實現(xiàn)。 24 參考文獻 [1]張立峰編著：《 JavaScript 動態(tài)網(wǎng)頁技術詳解》，北京 :電子工業(yè)出版社 ,20xx年版 [1]王潤森 , 王俊杰編著：《精通 JavaScript 動態(tài)網(wǎng)頁編程 (實例版 )》，北京 :人民郵電出版社 ,
研究報告相關推薦
鄂ICP備17016276號-1