中信初中高級備課中級部分ch

1、第五章第五章 輔助特效與數組輔助特效與數組回顧回顧表單驗證一般包括那些內容表單驗證一般包括那些內容?表單驗證的實現步驟。表單驗證的實現步驟。文本框控件有哪些常用的屬性、方法、事件？文本框控件有哪些常用的屬性、方法、事件？本章任務本章任務演示示例演示示例1：回車切換輸入的效果回車切換輸入的效果演示示例演示示例2：即時提示錯誤的輸入框即時提示錯誤的輸入框演示示例演示示例3：內容動態(tài)顯示的層特效內容動態(tài)顯示的層特效 制作回車切換輸入的效果制作回車切換輸入的效果制作內容動態(tài)顯示的層特效制作內容動態(tài)顯示的層特效制作即時提示錯誤的輸入框制作即時提示錯誤的輸入框會使用圖片代替提交按鈕會使用圖片代替提交按鈕會

2、使用會使用onKeyDown事件事件檢查用戶輸入的特殊字符檢查用戶輸入的特殊字符會使用會使用DIV的的innerHTML或或innerText動態(tài)顯示內容動態(tài)顯示內容會使用多個會使用多個DIV動態(tài)隱藏或顯示內容動態(tài)隱藏或顯示內容本章目標本章目標如何使用圖片代替提交按鈕如何使用圖片代替提交按鈕為了美觀，現把提交按鈕變成圖片，但仍然保持為了美觀，現把提交按鈕變成圖片，但仍然保持表單的驗證功能？如何實現？表單的驗證功能？如何實現？頁面效果頁面效果使用圖片的單擊事件。使用圖片的單擊事件。onClick=checkForm( )如何使用圖片代替提交按鈕如何使用圖片代替提交按鈕根據上述分析和提供的素材頁面

3、來實現表單驗證。根據上述分析和提供的素材頁面來實現表單驗證。素材頁面素材頁面 function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(用戶名不能為空！用戶名不能為空！); document.myform.txtUserName.focus( ); 檢驗是否為空檢驗是否為空單擊事件，調用單擊事件，調用表單驗證函數表單驗證函數如何使用圖片代替提交按鈕如何使用圖片代替提交按鈕能進行表單驗證，但即使是正確填寫了表單，也能進行表單驗證，但即使是正確填寫了表單，也不能提交頁面（點擊不能提交頁面（點擊“注冊注冊

4、”沒反映）。沒反映）。如何使用圖片代替提交按鈕如何使用圖片代替提交按鈕因為圖片不具備因為圖片不具備“提交提交”按鈕的提交功能，所以需按鈕的提交功能，所以需要人工調用提交方法要人工調用提交方法 submit( ) 。 function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(用戶名不能為空！用戶名不能為空！); document.myform.txtUserName.focus( );else document.myform.submit( ); 查看源代碼查看源代碼如果表單輸入合法，則提交表單如果表

5、單輸入合法，則提交表單制作回車切換輸入的效果制作回車切換輸入的效果輸入完畢后回車，默認會提交表單。輸入完畢后回車，默認會提交表單。 頁面效果頁面效果如何制作回車如何制作回車Tab切換效果？切換效果？ 頁面效果頁面效果制作回車切換輸入的效果制作回車切換輸入的效果1、 使用鍵盤輸入事件使用鍵盤輸入事件onKeyDown事件事件 2、 檢查輸入是否是回車鍵檢查輸入是否是回車鍵ASCII碼碼13，若是則將，若是則將 輸入改為輸入改為Tab鍵鍵ASCII碼碼9 function changeFocus( ) if (event.keyCode=13) event.keyCode=9; 查看源代碼查看源代

6、碼鍵盤按下，調用實鍵盤按下，調用實現現Tab效果的函數效果的函數修改回車鍵為修改回車鍵為Tab鍵鍵Event事件對象包含輸入鍵信息事件對象包含輸入鍵信息制作回車切換輸入的效果制作回車切換輸入的效果上述注冊頁面中，需要給每個文本框添加鍵盤按上述注冊頁面中，需要給每個文本框添加鍵盤按下事件，有沒有更簡單的辦法？下事件，有沒有更簡單的辦法？ 制作回車切換輸入的效果制作回車切換輸入的效果通過給通過給document對象添加鍵盤事件。對象添加鍵盤事件。 function changeFocus( ) if (event.keyCode=13 & event.srcElement.type!=bu

7、tton & event.srcElement.type!=submit ) event.keyCode=9; document.onKeyDown= changeFocus ; 如果按鍵是回車鍵，并且控件如果按鍵是回車鍵，并且控件類型不是提交、重置按鈕等按類型不是提交、重置按鈕等按鈕，則變?yōu)殁o，則變?yōu)門ab切換切換document對象的對象的onKeyDown事件事件，它將接收，它將接收頁面中所有的鍵盤事件頁面中所有的鍵盤事件查看源代碼查看源代碼小結小結1根據提供的素材頁面，實現游戲中的人物移動效果。根據提供的素材頁面，實現游戲中的人物移動效果。提示：提示：1、根據按下的方向鍵，改變

8、層的、根據按下的方向鍵，改變層的Left或或Top坐標坐標 document.getElementById(man).style.pixelLeft document.getElementById(man).style.pixelTop2、方向鍵的、方向鍵的ASCII碼：碼： 向上鍵向上鍵38，向下箭向下箭40 向左鍵向左鍵37， 向右鍵向右鍵393、添加鍵盤事件：添加鍵盤事件：document.onKeyDown= move;練習答案練習答案 練習素材練習素材制作即時提示錯誤的特效制作即時提示錯誤的特效如何制作即時提示錯誤的特效？如何制作即時提示錯誤的特效？頁面效果頁面效果制作即時提示錯誤的

9、特效制作即時提示錯誤的特效使用使用DIV層的內容動態(tài)改變。層的內容動態(tài)改變。 在每個輸入框后添加一個在每個輸入框后添加一個DIV層層, 根據用戶的輸入根據用戶的輸入, 動動態(tài)顯示錯誤信息態(tài)顯示錯誤信息制作即時提示錯誤的特效制作即時提示錯誤的特效演示實現步驟：演示實現步驟：1、在登錄文本框后插入、在登錄文本框后插入DIV標簽標簽loginError （即沒有樣式的（即沒有樣式的DIV層）層）2、修改源代碼，設置、修改源代碼，設置DIV的顯示方式為的顯示方式為inline，即和文本框在同一行，即和文本框在同一行 制作即時提示錯誤的特效制作即時提示錯誤的特效演示實現步驟：演示實現步驟：3、添加文本框

10、失去焦點的事件函數、添加文本框失去焦點的事件函數： function checkLogin( ) var myDiv=document.getElementById(loginError); myDiv.innerHTML=; var strName=document.userfrm.loginName.value; if (strName.length = 0) myDiv.innerHTML=用戶名不能為空用戶名不能為空; return; 查看源代碼查看源代碼如果輸入的信息不合法，則利用如果輸入的信息不合法，則利用DIV的的innerHTML或或innerText進行錯誤進行錯誤提示，提示

11、，innerText只能寫文本信息只能寫文本信息獲取插入的獲取插入的DIV對象對象小結小結2完善完善”密碼密碼“和和”電子郵件電子郵件“的錯誤提示功能。的錯誤提示功能。提示：提示：1、密碼和電子郵件文本框后各添加一個、密碼和電子郵件文本框后各添加一個DIV標簽標簽2、修改、修改DIV的顯示樣式為的顯示樣式為inline3、給各個文本框添加失去焦點、給各個文本框添加失去焦點onBlur的事件函數的事件函數制作內容動態(tài)改變的層特效制作內容動態(tài)改變的層特效如何制作內容動態(tài)改變的特效如何制作內容動態(tài)改變的特效(選擇不同的計算方式選擇不同的計算方式)？頁面效果頁面效果制作內容動態(tài)改變的層特效制作內容動態(tài)

12、改變的層特效方法方法1： 當動態(tài)顯示的內容較少時，使用當動態(tài)顯示的內容較少時，使用 myDiv.innerHTML=“HTML代碼代碼”；方法方法2： 當動態(tài)顯示的內容較多，并相對固定時，則預先制作好當動態(tài)顯示的內容較多，并相對固定時，則預先制作好DIV內容，內容， 然后使用然后使用 myDiv.style.display=“none/block”；有哪些方法可以實現動態(tài)改變頁面內容？有哪些方法可以實現動態(tài)改變頁面內容？制作內容動態(tài)改變的層特效制作內容動態(tài)改變的層特效演示實現步驟：演示實現步驟：1、預先插入兩個、預先插入兩個DIV標簽，分別放置不同計算方式標簽，分別放置不同計算方式顯示的內容：

13、顯示的內容：DIV1按面積計算按面積計算顯示的內容顯示的內容DIV2按貸款總額計按貸款總額計算顯示的內容算顯示的內容演示素材演示素材function InitDIV( )document.getElementById(DIV1).style.display=none; 制作內容動態(tài)改變的層特效制作內容動態(tài)改變的層特效演示實現步驟：演示實現步驟：2、添加函數，初始化、添加函數，初始化DIV1不顯示，默認按貸款總額計算：不顯示，默認按貸款總額計算：隱藏隱藏DIV1頁面加載時調用頁面加載時調用查看源代碼查看源代碼function displayDIV( ) if (document.myform.

14、methodRadio0.checked=true) document.getElementById(DIV1).style.display=block; document.getElementById(DIV2).style.display=none; else document.getElementById(DIV2).style.display=block; document.getElementById(DIV1).style.display=none; 制作內容動態(tài)改變的層特效制作內容動態(tài)改變的層特效3、添加函數，根據、添加函數，根據“計算方式計算方式”的選擇，隱藏的選擇，隱藏/顯示

15、對應顯示對應DIV層：層：根據單選按鈕的值，根據單選按鈕的值，隱藏隱藏/顯示對應的層顯示對應的層按鈕的單擊事件按鈕的單擊事件實現簡單的省市級聯功能實現簡單的省市級聯功能如何實現省市級聯的效果？如何實現省市級聯的效果？頁面效果頁面效果1、利用省份下拉框的選項改變事件、利用省份下拉框的選項改變事件onChange2、根據用戶選擇的省份，動態(tài)添加城市下拉框的值、根據用戶選擇的省份，動態(tài)添加城市下拉框的值onChange選項選項/內容改變事件內容改變事件動態(tài)添加動態(tài)添加城市選項城市選項Option實現簡單的省市級聯功能實現簡單的省市級聯功能演示實現步驟：演示實現步驟： 1、添加省份、城市下拉框、添加省

16、份、城市下拉框省份下拉框名稱省份下拉框名稱selProvince表單名稱表單名稱myform省份下拉框選項省份下拉框選項option城市下拉框名稱城市下拉框名稱selCity實現簡單的省市級聯功能實現簡單的省市級聯功能演示實現步驟：演示實現步驟： 2、查看生成的、查看生成的HTML代碼代碼. -請選擇開戶帳號的省份請選擇開戶帳號的省份- 四川省四川省 山東省山東省 湖北省湖北省 . -請選擇開戶帳號的城市請選擇開戶帳號的城市- .多個選項構成多個選項構成選項數組選項數組options選項選項Option城市下拉框暫城市下拉框暫時沒有具體的時沒有具體的城市選項城市選項實現簡單的省市級聯功能實現簡

17、單的省市級聯功能演示實現步驟：演示實現步驟： 3、添加動態(tài)改變城市選項的、添加動態(tài)改變城市選項的changeCity( )函數函數function changeCity( ) var province=document.myform.selProvince.value; var newOption1,newOption2; switch(province) case 四川省四川省 : newOption1= new Option(成都市成都市,chengdu); newOption2= new Option(瀘州市瀘州市,luzhou); break; case 湖北省湖北省 : docume

18、nt.myform.selCity.options.length=0; document.myform.selCity.options.add(newOption1); document.myform.selCity.options.add(newOption2); 2、根據用戶選擇的省份，、根據用戶選擇的省份，動態(tài)創(chuàng)建城市下拉框選項動態(tài)創(chuàng)建城市下拉框選項1、獲取用戶選擇、獲取用戶選擇的省份的省份3、清除原有的選項、清除原有的選項4、將選項添加到選項數組、將選項添加到選項數組options查看源代碼查看源代碼實現簡單的省市級聯功能實現簡單的省市級聯功能演示實現步驟：演示實現步驟： 4、選擇下拉

19、框的、選擇下拉框的onChange事件，調用事件函數事件，調用事件函數 -請選擇開戶帳號的省份請選擇開戶帳號的省份- 四川省四川省 山東省山東省 湖北省湖北省當用戶選擇不同的省份當用戶選擇不同的省份時，將調用函數，改變時，將調用函數，改變城市下拉框的選項城市下拉框的選項查看源代碼查看源代碼實現簡單的省市級聯功能實現簡單的省市級聯功能小結下拉框控件小結下拉框控件SELECT：常用屬性常用屬性lengthvalueoptionsselectedIndex常用事件常用事件onChangeonBluronFocus選項數組選項數組1、每個選項、每個選項Option可以動態(tài)創(chuàng)建可以動態(tài)創(chuàng)建new Opt

20、ion(”顯示內容顯示內容”，“值值”)2、動態(tài)添加選項、動態(tài)添加選項selCity.options.add(newOption1）3、清除選項、清除選項selCity.options.length=0讀取或設置被選項的索引號，讀取或設置被選項的索引號，第一個為第一個為0，其他類推，其他類推選項改變事件選項改變事件使用數組優(yōu)化省市級聯功能使用數組優(yōu)化省市級聯功能每個省實際上有很多城市、并且城市數量不等，每個省實際上有很多城市、并且城市數量不等，有沒有更簡單、通用的辦法？有沒有更簡單、通用的辦法？var newOption1,newOption2; switch(province) case 四

21、川省四川省 :newOption1= new Option(成都市成都市,chengdu);newOption2= new Option(瀘州市瀘州市,luzhou);break; case 湖北省湖北省 : newOption1= new Option(武漢市武漢市,wuhan);newOption2= new Option(襄樊市襄樊市,xiangfan);break; case 山東省山東省 : newOption1= new Option(青島市青島市,qingdao);newOption2= new Option(煙臺市煙臺市,yantai); 如果有很多城市，就需要如果有很多城市，

22、就需要定義很多變量，編寫很多定義很多變量，編寫很多重復的代碼重復的代碼使用數組優(yōu)化省市級聯功能使用數組優(yōu)化省市級聯功能JavaScript中的數組用法：中的數組用法： var emp = new Array(3);emp0 = Ryan Dias;emp1 = Graham Browne;emp2 = David Greene;emp.sort( );document.write(排序結果是：排序結果是：);for (var i in emp) document.write(empi+);1、創(chuàng)建數組對象、創(chuàng)建數組對象new Array(大小大小)2、為數組賦值。數組、為數組賦值。數組中可存放

23、任意數據中可存放任意數據 3、調用數組的方法、調用數組的方法sort( )進行排序進行排序 4、循環(huán)輸出，等同：、循環(huán)輸出，等同：for(var i=0;iemp.length;i+)查看源代碼查看源代碼使用數組優(yōu)化省市級聯功能使用數組優(yōu)化省市級聯功能JavaScript中的數組用法：中的數組用法： var cityList = new Array( );cityList0=成都成都, 綿陽綿陽, 德陽德陽, 自貢自貢, , 瀘州瀘州;cityList1=濟南濟南, 青島青島, 威海威海, 日照日照;cityList2 = 武漢武漢, 宜昌宜昌, 恩施恩施, 潛江潛江;document.wri

24、te(四川省包括的城市是：四川省包括的城市是：); for (var j in cityList0) document.write(cityList0j +);1、創(chuàng)建數組，可、創(chuàng)建數組，可以不指定大小以不指定大小 2、為數組賦值。每、為數組賦值。每個單元格可以是數個單元格可以是數組。組。JavaScript不不支持二維數組支持二維數組 3、循環(huán)輸出、循環(huán)輸出.0-表示四川省的索引號，同理可表示四川省的索引號，同理可以換為山東省索引號以換為山東省索引號1查看源代碼查看源代碼使用數組優(yōu)化省市級聯功能使用數組優(yōu)化省市級聯功能用數組優(yōu)化解決省市級聯問題：用數組優(yōu)化解決省市級聯問題： 012一維數組一

25、維數組: cityList數組索引號數組索引號1下拉框索引號下拉框索引號selectedIndex01231、用數組存放每個用數組存放每個省省份份包含的城市包含的城市 2、根據用戶選擇根據用戶選擇的的省份索引號，省份索引號，找到對應的找到對應的數組索引號數組索引號3、根據對應的數組內、根據對應的數組內容，容，添加城市選項到添加城市選項到城市下拉框中城市下拉框中cityList0cityList1cityList2使用數組優(yōu)化省市級聯功能使用數組優(yōu)化省市級聯功能用數組優(yōu)化解決省市級聯問題：用數組優(yōu)化解決省市級聯問題： function changeCity( ) var cityList = n

26、ew Array( ); cityList0=成都成都, 綿陽綿陽, 德陽德陽, 自貢自貢, 瀘州瀘州; cityList1=濟南濟南, 青島青島, 日照日照; cityList2 = 武漢武漢, 宜昌宜昌, 潛江潛江; var pIndex=document.myform.selProvince.selectedIndex-1; var newOption1; document.myform.selCity.options.length=0; for (var j in cityListpIndex) newOption1=new Option(cityListpIndexj, cityLi

27、stpIndexj); document.myform.selCity.options.add(newOption1); 1、創(chuàng)建數組，存放各、創(chuàng)建數組，存放各省份對應城市省份對應城市 2、根據用戶選擇的省份索引號，、根據用戶選擇的省份索引號，獲取對應數組索引號獲取對應數組索引號 4、根據數組內容創(chuàng)建選項，、根據數組內容創(chuàng)建選項，并添加到城市下拉框并添加到城市下拉框3、清空原下拉框內容、清空原下拉框內容 查看源代碼查看源代碼使用文字下標的數組再次優(yōu)化使用文字下標的數組再次優(yōu)化使用索引號必須要求省份的排列順序和數組編號相同。使用索引號必須要求省份的排列順序和數組編號相同。cityList0=成都

28、成都, . 瀘州瀘州;cityList1=濟南濟南, 日照日照;cityList2=武漢武漢, 潛江潛江;cityList3=合肥合肥, 亳州亳州; cityList4=東莞東莞, 珠海珠海; cityList5=桂林桂林, 賀州賀州; cityList6=貴陽貴陽, 遵義遵義; 四川省四川省 山東省山東省 湖北省湖北省 安徽省安徽省 廣東省廣東省 廣西省廣西省 貴州省貴州省 當當30多個省份羅列在一起時容易搞錯多個省份羅列在一起時容易搞錯對應關系對應關系，有沒有更直觀的辦法，有沒有更直觀的辦法?使用文字下標的數組再次優(yōu)化使用文字下標的數組再次優(yōu)化1、JavaScript中的數組中的數組下標可

29、以采用標識符下標可以采用標識符代替。代替。 例如：例如： cityList山東省山東省 = 濟南濟南, 青島青島, 淄博淄博, 棗莊棗莊, 東營東營, 煙臺煙臺, 濰坊濰坊, 濟寧濟寧, 泰安泰安, 威海威海, 日照日照;2、可以根據用戶選擇的、可以根據用戶選擇的value值值，與數組下標標識，與數組下標標識 進行比較，從而找出該省包括的城市。進行比較，從而找出該省包括的城市。用文字下標的數組優(yōu)化省市級聯菜單：用文字下標的數組優(yōu)化省市級聯菜單： 使用文字下標的數組再次優(yōu)化使用文字下標的數組再次優(yōu)化function changeCity( ) var cityList = new Array( ); cityList四川省四川省=成都成都, 綿陽綿陽, , 瀘州瀘州; cityLis