tts8.0課件課后練習(xí)代碼-經(jīng)典案例_第1頁
tts8.0課件課后練習(xí)代碼-經(jīng)典案例_第2頁
tts8.0課件課后練習(xí)代碼-經(jīng)典案例_第3頁
tts8.0課件課后練習(xí)代碼-經(jīng)典案例_第4頁
tts8.0課件課后練習(xí)代碼-經(jīng)典案例_第5頁
已閱讀5頁，還剩32頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

JavaHTMLCSSJSjavascript 計算整數(shù)值比階乘計字符查詢（選作字符查詢與過濾（使用正則表達(dá)式數(shù)組倒轉(zhuǎn)與排資產(chǎn)折舊計算器（選作輸入驗計算查詢時javascript 問創(chuàng)建html頁面并為該頁面添加三個按鈕，該頁面的運行效果如圖－1所示圖 oWorld.”；單擊按鈕“secondbutton”， oWorldinscriptblock.”；單擊按鈕“thirdbutton”，則彈出提示信息 oWorldinscriptfile.”。彈出的提示信息的效果如圖－2所示圖要求：第一個按鈕的javascript碼直接定義在其onclick件中；第二個按鈕的代碼定義在<script>碼塊中；第三個按鈕的javascript碼定義在js件中方 創(chuàng)建htmljs_demo1.html，并在html面上添加form>素，然后添加第一個鈕，并為其定義單擊事件的javascripthtml代碼如下所示<inputtype="button"button"o在html頁面的<head>元素里添加<script>元素，并定義方法 Method。html代碼如<scriptlanguage="javascript"Method()oWorldinscript}然后在html頁面上添加第二個按鈕，并在其單擊事件中調(diào)用方法 Method。html代碼<inputtype="button"value="secondbutton"Method();"創(chuàng)建名稱為js_demo1.js的文件，并在此文件中添加javascript代碼，以定義方secondMethod。代碼如下所functionsecondMethod()oWorldinscript}然后在html頁面上引入js件，代碼如下<scriptlanguage="javascript"src="js_demo1.js"最后在html頁面上添加第三個按鈕，并在其單擊事件中調(diào)用方法secondMethodhtml碼如下所<inputtype="button"value="thirdbutton"onclick="secondMethod();"實js_demo1.html文件中的代碼如下所<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN".<title>Javascript<metahttp-equiv="content-type"content="text/html;charset=utf-8"<scriptlanguage="javascript"src="js_demo1.js"<scriptlanguage="javascript"Method()oWorldinscript}o<inputtype="button"button"o<inputtype="button"value="secondbutton"<inputtype="button"value="thirdbutton"隱js_demo1.js文件中的代碼如下所functionsecondMethod()oWorldinscript}隱擴(kuò)問圖圖方首先在html面的form>記中添加文本框和按鈕，并為文本框定義id性，同時為按鈕定義單擊事件所調(diào)用的方法名稱。html代碼如下所示：<inputtype="text"id="txtData"<inputtype="button"value="得到錄入數(shù)據(jù)的整數(shù)部分"onclick="getInt();"然后創(chuàng)建名為getInt的方法，并使用 ementById方法得到文本框?qū)ο?，并使用value屬性得到文本框的文本，代碼如下所示：varstr 得到文本后，使用isNaN方法判斷文本框中的文本是否為數(shù)值。該方法如果返回true表示非數(shù)值，需要使用alert方法彈出提示信息“請錄入數(shù)值“；如果該方法返回false，則表示為值，然后使用parseInt法得到數(shù)值的整數(shù)部分，并使用alert法彈出提示信息。代碼如下所ifalert(elsevardata=parseInt(str);alert("整數(shù)部分為data);}實html文件中form>素中的代碼如下所示<inputtype="text"id="txtData"<inputtype="button"value="得到錄入數(shù)據(jù)的整數(shù)部分"onclick="getInt();"隱Javascript碼如下所示//轉(zhuǎn)換函數(shù)：得到錄入數(shù)值的整數(shù)functiongetInt()varstrifalert(elsevardata=parseInt(str);alert("整數(shù)部分為data);}}隱擴(kuò)計算錄入的數(shù)值的平方。單擊頁面上的“計算平方“按鈕，則判斷頁面文本框中錄入的文本，如果錄入的文本不能轉(zhuǎn)換為數(shù)值，則提示用戶重新錄入；如果為數(shù)值，則計算錄入的數(shù)值的平方，并使用彈出信息提示。頁面效果如圖－所示。圖html文件中form>素中的代碼如下所示<inputtype="text"id="txtData"<inputtype="button"value="計算平方"onclick="getSquare();"隱Javascript碼如下所示//轉(zhuǎn)換函數(shù)：計算錄入數(shù)值的平functiongetSquare()varstrifalert(elsevardata=parseFloat(str);varresult=data*data;}}隱問比較數(shù)值的大值。如果錄入的文本不能轉(zhuǎn)換為數(shù)值，則提示用戶重新錄入；如果可以轉(zhuǎn)換為數(shù)值，則與內(nèi)置好數(shù)值（比如10）進(jìn)行比較，并提示比較的結(jié)果（“小了”或者“大了”）。頁面效果如圖－6所示圖方首先在html面上的form>記中添加文本框，為文本框定義onblur件，并使this.value關(guān)鍵字將文本框的內(nèi)容傳入處理方法。html代碼如下所示<inputtype="text"onblur="guessNumber(this.value);"然后創(chuàng)建名為guessNumber方法，并使用參數(shù)得到傳入的文本框的內(nèi)容。方法的定義如下functionguessNumber(str)}在方法中，首先預(yù)定義好一個用于比較判斷的數(shù)值（比如10），代碼如下所varresult=然后使用isNaN方法判斷文本框中的文本是否為數(shù)值。該方法如果返回true，則表示非數(shù)值，需要使用alert法彈出提示信息“請錄入數(shù)值“；如果該方法返回false，則表示為數(shù)值，然后使用parseFloat方法將文本框中的文本轉(zhuǎn)換為數(shù)值。代碼如下所示：ifelse{vardata=}轉(zhuǎn)換為數(shù)值之后，使用三元運算符將錄入的數(shù)值與預(yù)置好的數(shù)值進(jìn)行比較，并使用alert方法varinfo=data>result?"大了":實html文件中form>素中的代碼如下所示<inputtype="text"id="txtData"<inputtype="text"onblur="guessNumber(this.value);"Javascript碼如下所示//猜數(shù)functionguessNumber(str)//內(nèi)置結(jié)varresult=//比ifalert("請錄入數(shù)elsevardata=varinfo=data>result?"大了":"小了";}}隱3.4擴(kuò)猜數(shù)字修改gueuber方法中的代碼，實現(xiàn)猜數(shù)字的功能。即，判斷頁面文本框中錄入的文本是否為數(shù)值，如果錄入的文本不能轉(zhuǎn)換為數(shù)值，則提示用戶重新錄入；如果可以轉(zhuǎn)換為數(shù)值，則與內(nèi)置好的數(shù)值進(jìn)行比較，并提示比較的結(jié)果（“小了”、“大了”或者“猜對了”）。頁面效果如圖－7所示圖html文件中form>素中的代碼不需要修改，而Javascript碼如下所示//猜數(shù)functionguessNumber(str)//內(nèi)置結(jié)varresult=//比ifelse{vardata=varinfodataresult"大了"小了infodataresult"猜對了}}隱問計算階乘。創(chuàng)建html面并為該頁面添加一個按鈕，單擊該按鈕，則計算10階乘，并彈圖方首先在html頁面上的<form>標(biāo)記中添加按鈕，并為按鈕定義單擊事件。html代碼如下示<inputtype="button"value="求10的階乘"onclick="getFac();"然后創(chuàng)建名為getFac方法，并使用循環(huán)計算10階乘。循環(huán)的相關(guān)代碼如下所varresult=for(vari=1;i<=10;{result*=}實html文件中form>素中的代碼如下所示<inputtype="button"value="求10的階乘"onclick="getFac();"Javascript碼如下所示//求階function{varresult=for(vari=1;i<=10;{result*=}alert("10的階乘為："+}隱擴(kuò)展（選作計算“百錢買百雞”的問題百錢買百雞：公雞5文錢一只，母雞3文錢一只，小雞1文錢3只，如何用百文錢買百只雞單擊頁面上的按鈕，則顯示“百錢買百雞的方案”。頁面效果如圖－9所示圖html文件中form>素中的代碼如下所示<inputtype="button"value="百錢買百雞"();"Javascript碼如下所示//百錢買function()//用于顯示的文本varresult=//公雞、母雞以及varcock,hen,//公雞最多買20，母雞最多買33for(cock=0;cock{{chick=100-cock-hen;if(chick%3==0){vartotal=cock*5+hen*3+chick/if(total=={result+="公雞："+cock+",母雞："+hen+",小雞}}}}}}隱問查詢指定字符的數(shù)用戶在文本框中錄入文本，單擊按鈕后，統(tǒng)計錄入文本中子字符串“js”數(shù)量，并彈出顯示圖方html面上的form>記中添加文本框和按鈕，并為按鈕定義單擊事件。html碼如<inputtype="text"id="txtString"/><br<inputtype="button"value="查找字符"onclick="searchString();"創(chuàng)建名為searchString的方法，并首先得到文本框中錄入的文本。代碼如下所varstr 然后定義變量以記載子字符串js現(xiàn)的次數(shù)，代碼如varcount=使用string對象的indexOf方法得到子字符串js出現(xiàn)的位置，并循環(huán)判碼如下//得到第一個js現(xiàn)的位varindex=while(index>-1)//查找下一個index=}實html文件中form>素中的代碼如下所示<inputtype="text"id="txtString"/><br<inputtype="button"value="查找字符"onclick="searchString();"Javascript碼如下所示//查找文本框中錄入的子字符串js個functionsearchString()varstrvarcount=//得到第一個js現(xiàn)的位varindex=while(index>-1)//查找下一個index=}}隱擴(kuò)過濾特殊字符。用戶在文本框中錄入文本，頁面效果如圖－11所示圖單擊按鈕后，則過濾文本中的字符js，并替換為*，頁面效果如圖－12所示圖html文件中form>素中的代碼如下所示<inputtype="text"id="txtString"<inputtype="button"value="過濾特殊字符（js）"Javascript碼如下所示//查找并替換文本框中錄入的子字符串js為functionsearchStringAndReplace()varstrvarcount= varindex=str.indexOf("js",while(index>-1)str=index=str.indexOf("js",index+}ementById("txtString").value=}隱}隱問查詢文本中的指定字符的數(shù)量并過用戶在文本框中錄入文本，頁面效果如圖－13所示圖單擊按鈕后，統(tǒng)計錄入文本中子字符串“js”的數(shù)量，并替換為*，然后彈出替換的統(tǒng)計圖方html面上的form>記中添加文本框和按鈕，并為按鈕定義單擊事件。html碼如<inputtype="text"id="txtString"/><br<inputtype="button"value="查找字符并過濾（使用正則表達(dá)式）"創(chuàng)建名為stringByRegex的方法，并首先得到文本框中錄入的文本。代碼如下所varstr 然后定義正則表達(dá)式，并匹配文本中的子字符串js代碼如下varresult=最后，替換文本中的子字符串js*。代碼如下實html文件中form>素中的代碼如下所示<inputtype="text"id="txtString"/><br<inputtype="button"value="查找字符并過濾（使用正則表達(dá)式）"Javascript碼如下所示//使用正則表達(dá)式操作文functionstringByRegex()varstrvarresult=ementById("txtString").value=str.replace(/js/gi,alert("共result.length"處。}隱擴(kuò)問用戶在文本框中錄入逗號分隔的數(shù)值文本，頁面效果如圖－15所示圖圖圖方在hl頁面上的fo>標(biāo)記中添加一個文本框和兩個按鈕。因為兩個按鈕的單擊事件均處理同一個文本框中的內(nèi)容，因此定義同一個方法來處理兩個按鈕的單擊事件，并使用不同的參數(shù)以區(qū)分不同的操作。hl代碼如下所示：<inputtype="text"id="txtNumbers"value="12,4,3,123,51"<inputtype="button"value="數(shù)組倒轉(zhuǎn)"onclick="operateArray(1);"<inputtype="button"value="數(shù)組排序（文本）"onclick="operateArray(2);"創(chuàng)建名為operateArray的方法，并使用參數(shù)得到操作的類型。方法定義的代碼如下所functionoperateArray(t)}首先得到文本框中錄入的文本，并拆分functionoperateArray(t)}vararray 然后根據(jù)參數(shù)值的不同，實現(xiàn)對數(shù)組不同的操作：翻轉(zhuǎn)或者排序。代碼如switch(t)casebreak;casebreak;}實html文件中form>素中的代碼如下所示<inputtype="text"id="txtNumbers"value="12,4,3,123,51"<inputtype="button"value="數(shù)組倒轉(zhuǎn)"onclick="operateArray(1);"<inputtype="button"value="數(shù)組排序（文本）"onclick="operateArray(2);"Javascript碼如下所示//數(shù)組反轉(zhuǎn)與排functionoperateArray(t)//拆分為vararray=switch(t){ casecasecase}}隱數(shù)值數(shù)組排用戶在文本框中錄入逗號分隔的數(shù)值文本，頁面效果如圖－18所示圖圖html文件中form>素中的代碼如下所示type="text"id="txtNumbers"value="12,4,3,123,51"value="數(shù)組倒轉(zhuǎn)"onclick="operateArray(1);"<inputtype="button"value="數(shù)組排序（文本）"onclick="operateArray(2);"<inputtype="button"value="數(shù)組排序（數(shù)值）"onclick="operateArray(3);"Javascript碼如下所示//數(shù)組排functionoperateArray(t)//拆分為vararrayswitch(t) casebreak;case2:break;casebreak;}}functionsortFunc(a,b)returna-}隱資產(chǎn)折舊計算器（選作問制作頁面版的資產(chǎn)折舊計算用戶在頁面上錄入資產(chǎn)、折舊率以及計算年限，單擊“計算”按鈕后，計算該資產(chǎn)的折舊資產(chǎn)折舊值的計算公式

圖第n年的剩余價值＝資產(chǎn)*（1?折舊率由此可見，對于圖－20中所錄入的數(shù)值，第1后的資產(chǎn)價值10000*1-2后的資產(chǎn)價值10000*1-0.15)*1-0.157225方html面上的form>記中添加提示文本、文本框、按鈕和多行文本框，并為按鈕添加單擊事件。html代碼如下所示：錄入資產(chǎn)采購時的價值：<inputid="txtPrice"type="text"value="10000"錄入折舊率：<inputid="txtRate"type="text"value="0.15"/><br錄入計算年限：<inputid="txtYear"type="text"value="5"/><br<inputtype="button"value="計算"onclick="calculateDepreciation();"<textareaid="txtResult"cols="50"創(chuàng)建名為calculateDepreciation的方法，首先得到用戶錄入的各項數(shù)值，代碼如下所varmoneyvarrate=varyear 定義變量用于顯示結(jié)果的字符串，代碼如下所示vars=使用循環(huán)計算每年的折舊率，循環(huán)的代碼如for(vari=1;i<=year;i++)}在循環(huán)中，根據(jù)資產(chǎn)折舊計算的公式計算某年的資產(chǎn)剩余值，并拼接顯示結(jié)果的字符串。為方便查看結(jié)果，每顯示一年的結(jié)果后，換行顯示。代碼如下所示（其中，i指當(dāng)前所計算的年數(shù)，\n用于換行）：varr=money*Math.pow((1-rate),s+=i+"+r+計算完畢后，將結(jié)果顯示在多行文本框中（使用innerHTML屬性為多行文本框賦值）。代碼注意：因為javascript的數(shù)值為float型，因此，會出現(xiàn)非精確的數(shù)實html文件中form>素中的代碼如下所示錄入資產(chǎn)采購時的價值：<inputid="txtPrice"type="text"value="10000"錄入折舊率：<inputid="txtRate"type="text"value="0.15"/><br錄入計算年限：<inputid="txtYear"type="text"value="5"/><br<inputtype="button"value="計算"onclick="calculateDepreciation();"<textareaid="txtResult"cols="50"隱Javascript碼如下所示//計算資產(chǎn)折functioncalculateDepreciation()////得到錄入的各varmoney varratevaryear //拼接結(jié)果vars=//循環(huán)計算每年for(vari=1;i<=year;i++)varr=money*Math.pow((1-rate),//每年的結(jié)果顯示為一s+=i+"+r+} ementById("txtResult").innerHTML=}隱修改資產(chǎn)折舊計算器，保留計算結(jié)果的小數(shù)點后兩位，頁面效果如圖－21所示圖html文件中form>素中的代碼不需要修改。Javascript碼如下所示//計算資產(chǎn)折functioncalculateDepreciation()//得到錄入的各項數(shù)varmoneyvarrate varyear varr=money*Math.pow((1-rate),//每年的結(jié)果顯示為s+=i+"+r+"+r.toFixed(2)+}ementById("txtResult").innerHTML=}//拼接結(jié)果字符vars=//循環(huán)計算每年的折for(vari=1;i<=year;i++)隱問驗證頁面上的用戶錄用戶需要在頁面上用戶名和，錄入的要求如圖－22所示圖圖方html面上的form>記中添加提示文本、文本框，然后為文本框添加onblur事件，并使用this.value關(guān)鍵字傳入文本框中的文本。html代碼如下所示：用戶名（3到6位字母數(shù)字的組合）：<inputtype="text"（6位數(shù)字）：<inputtype=用戶名（3到6位字母數(shù)字的組合）：<inputtype="text"（6位數(shù)字）：<inputtype="text"functionvalidateUserName(name)}然后根據(jù)錄入要求創(chuàng)建正則表達(dá)式對象，并對錄入的用戶名進(jìn)行驗證。代碼如下所varreg=/^[a-zA-Z0-9]{3,6}$/;varisRight=再創(chuàng)建名為validateUserPhone的方法，并為其定義參數(shù)以接收傳入的文本。定義方法的代碼functionvalidateUserPhone(phone)}然后根據(jù)錄入要求創(chuàng)建正則表達(dá)式對象，并對錄入的進(jìn)行驗證。代碼如下所示varreg=/^\d{6}$/;varisRight=實html文件中form>素中的代碼如下所示用戶名（3到6位字母數(shù)字的組合）：<inputtype="text"（6位數(shù)字）：<inputtype="text"隱隱Javascript碼如下所示//驗證用function{varreg=/^[a-zA-Z0-9]{3,6}$/;v

溫馨提示

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

評論

0/150

提交評論