Web前端開(kāi)發(fā)案例教程-HTML+CSS+Ja課件

JavaScript常用特效第十一章學(xué)習(xí)目標(biāo)掌握表單事件和腳本函數(shù)實(shí)現(xiàn)表單驗(yàn)證掌握String對(duì)象和文本框控件常用屬性和方法實(shí)現(xiàn)客戶(hù)端驗(yàn)證了解JavaScript和CSS的交互11.1表單驗(yàn)證使用JavaScript進(jìn)行表單驗(yàn)證，不但能檢查用戶(hù)輸入的無(wú)效或錯(cuò)誤數(shù)據(jù)，還能檢查用戶(hù)遺漏的必須項(xiàng)，從而減輕服務(wù)器端的壓力，避免服務(wù)器端的信息出現(xiàn)錯(cuò)誤，保證輸入的數(shù)據(jù)符合要求11.1.1表單驗(yàn)證的內(nèi)容需要驗(yàn)證的內(nèi)容通常包括日期是否有效或日期格式是否正確表單元素是否為空用戶(hù)名和密碼E-mail地址是否正確身份證號(hào)碼等是否是數(shù)字11.1.2表單驗(yàn)證當(dāng)輸入的表單數(shù)據(jù)不符合要求時(shí)，通常會(huì)進(jìn)行提示獲得表單元素值，該值一般為string類(lèi)型；使用JavaScript的一些方法對(duì)數(shù)據(jù)進(jìn)行判斷；當(dāng)表單提示時(shí)，觸發(fā)onsubmit事件，對(duì)獲取的數(shù)據(jù)進(jìn)行驗(yàn)證。11.1.3string對(duì)象String對(duì)象通常用于操作和處理字符串，可以在程序中獲得字符串長(zhǎng)度，對(duì)一個(gè)字符串按指定的樣式顯示，提取子字符串，求一個(gè)字符串中指定位置的字符以及將字符串轉(zhuǎn)換為大寫(xiě)或小寫(xiě)字符。1.字符串對(duì)象的屬性length屬性，它表示字符串的長(zhǎng)度（包括空格等），語(yǔ)法如下字符串對(duì)象.length;2.字符串對(duì)象的方法在JavaScript中，字符串對(duì)象的使用方法語(yǔ)法字符串對(duì)象.方法名();indexOf()方法indexOf(“查找的字符串”,index)，如果找到了則返回找到的位置，否則返回-1.采用JavaScript中indexOf()等方法實(shí)現(xiàn)電子郵件格式的驗(yàn)證。當(dāng)在如圖11.4所示的Email文本框中沒(méi)有輸入任何內(nèi)容時(shí)單擊“登錄”按鈕，將會(huì)彈出如圖11.5左邊所示的提示框，提示“Email不能為空”,當(dāng)輸入“test”再單擊“登錄”按鈕時(shí)，將會(huì)彈出如圖11.5中間所示的提示框，提示“Email格式不正確，必須包含@”，當(dāng)輸入”test@“時(shí)，再單擊”登錄“按鈕，將會(huì)彈出如圖11.5右邊所示的對(duì)話(huà)框，提示”Email格式不正確，必須包含.“，只有在Email地址中包含”@”和”.”符號(hào)時(shí)，其才是有效的Email地址。思路分析先獲取表單元素（Email文本框）的值（String類(lèi)型），然后進(jìn)行判斷使用getElementById()獲取表單元素Email的值使用字符串方法indexOf()判斷Email的值是否包含“@”和“.”符號(hào)。根據(jù)函數(shù)返回值是true還是flase來(lái)決定是否提交表單在函數(shù)check()中需要驗(yàn)證Email是否為空驗(yàn)證Email中是否包含符號(hào)”@“和”.“，varmail=document.getElementById(“email”),value;if(mail==””){alert(“Email不能為空”);returnfalse;}if(mail.indexOf(“@”)==-1){alert(“Email格式不正確\n必須包含@”)；

returnfalse;}if(mail.indexOf(“.”)==-1){alert(“Email格式不正確\n必須包含.”);returnfalse;}如果Email文本框中輸入的內(nèi)容不合要求，將彈出如圖11.5所示的提示框。如果用戶(hù)在Email文本框中輸入了正確的電子郵件地址，那么單擊“登錄”按鈕之后，將顯示success.html網(wǎng)頁(yè)。如圖11.6所示?！?lt;formaction="success.html"method="post"name="myform"onsubmit="returncheck()">……實(shí)例11-1：電子郵件格式的驗(yàn)證11.2文本框特效在網(wǎng)上注冊(cè)或填寫(xiě)各種表單時(shí)，經(jīng)常會(huì)有某些文本框中顯示自動(dòng)提示信息，如圖11.7所示的Email自動(dòng)提示文本，當(dāng)單擊此文本框時(shí)提示文本自動(dòng)被清除，文本框的效果發(fā)生變化，如圖11.8所示。使用文本框?qū)ο蟮南嚓P(guān)屬性、事件和方法可以實(shí)現(xiàn)此效果。11.2.1文本框?qū)ο笤贖TMLDOM中，文本框作為一個(gè)對(duì)象，每個(gè)文本框都有自己的方法和事件，通過(guò)這些方法和事件可改變文本框的效果11.2.2制作文本輸入提示特效應(yīng)用文本框事件來(lái)動(dòng)態(tài)地改變文本框的效果以登錄頁(yè)面中的郵箱文本輸入框?yàn)槔谋究蜃詣?dòng)顯示提示輸入正確電子郵箱的信息。單擊文本框時(shí)，清除自動(dòng)提示的文本，并且文本框的邊框變?yōu)榧t色。單擊"登錄"按鈕時(shí)，驗(yàn)證Email文本框不能為空，并且必須包含字符@和.。當(dāng)用戶(hù)輸入無(wú)效的電子郵件地址，單擊"登錄"按鈕將彈出錯(cuò)誤的提示信息框。單擊提示信息框上的“確定”按鈕之后，Email文本框中的內(nèi)容將被自動(dòng)選中并且高亮顯示，提示用戶(hù)重新輸入，如圖11.9所示。當(dāng)鼠標(biāo)單擊文本框時(shí)清楚自動(dòng)提示的文本信息，使用onfoucs事件，通過(guò)光標(biāo)移入文本框，然后調(diào)用自定義函數(shù)clearText，把文本框的值（value）設(shè)為空即可當(dāng)Email文本框沒(méi)有輸入任何內(nèi)容時(shí)，彈出的Email不能為空的信息，單擊“確定”按鈕后，Email文本框獲得焦點(diǎn)，使用focus()方法自動(dòng)選中Email文本框中的內(nèi)容并且高亮顯示，要使用文本框的select()方法，varmail=document.getElementById(“email”);if(mail.value==”請(qǐng)輸入正確的電子郵箱”){mail.value=””;mail.style.borderColor=”#ff0000”;}document.getElementById(“email”).focus();document.getElementById(“email”).select();如果Email文本框中輸入的內(nèi)容不合要求，將彈出如圖11.5所示的提示框。如果用戶(hù)在Email文本框中輸入了正確的電子郵件地址，那么單擊“登錄”按鈕之后，將顯示success.html網(wǎng)頁(yè)。如圖11.6所示。functioncheck(){ varmail=document.getElementById("email").value; if(mail==""){//檢測(cè)Email是否為空

alert("Email不能為空"); document.getElementById("email").focus(); returnfalse; } if(mail.indexOf("@")==-1||mail.indexOf(".")==-1){ alert("Email格式不正確\n必須包含符號(hào)@和."); document.getElementById("email").focus(); document.getElementById("email").select(); returnfalse; } returntrue; }functionclearText(){ varmail=document.getElementById("email"); if(mail.value=="請(qǐng)輸入正確的電子郵箱"){ mail.value=""; mail.style.borderColor="#ff0000"; } }實(shí)例11-2：文本輸入提示特效11.3JavaScript訪(fǎng)問(wèn)樣式的應(yīng)用在瀏覽網(wǎng)站時(shí)，一些網(wǎng)頁(yè)上經(jīng)常會(huì)顯示各種隨滾動(dòng)條同步滾動(dòng)的廣告圖片，該效果可以美化網(wǎng)頁(yè)并且可以進(jìn)行宣傳以提高知名度和實(shí)現(xiàn)盈利。思路分析：把廣告圖片放在一個(gè)div中，并且div總是顯示在頁(yè)面的上方使用getElementById()方法獲取層對(duì)象，并且獲取層在頁(yè)面上的初始位置根據(jù)鼠標(biāo)滾動(dòng)事件，獲取滾動(dòng)條滾動(dòng)的距離隨著滾動(dòng)條的移動(dòng)改變層在頁(yè)面上的位置11.3.1獲取樣式屬性值在css中可以使用樣式為每個(gè)元素設(shè)置位置，在DOM的style對(duì)象中也有對(duì)應(yīng)的元素定位屬性，在style對(duì)象中的positioning屬性如表11.3所示。在頁(yè)面中有一個(gè)層，使用style屬性獲取層在頁(yè)面中的位置。<scripttype="text/javascript">functionplace(){ vardivObj=document.getElementById("test"); alert("上："+divObj.style.top+"\n左："+divObj.style.left); }</script></head><body><divid="test"onclick="place()"style="position:absolute;width:200px;left:50px;top:120px;height:100px;">測(cè)試</div></body>實(shí)例11-3：獲取樣式屬性值如果要獲取內(nèi)部樣式表或外部樣式表中的屬性值，可以使用currentStyle對(duì)象使用方式如下varobjTop=divObj.currentStyle.top;<scripttype="text/javascript">functionplace(){ vardivObj=document.getElementById("test"); alert("上："+divObj.currentStyle.top+"\n左："+divObj.currentStyle.left); }</script>……<divid="test"onclick="place()">測(cè)試</div>……實(shí)例11-4：獲取層位置11.3.2制作隨鼠標(biāo)滾動(dòng)的廣告圖片使用currentStyle或getComputedStyle()可以獲得層在網(wǎng)頁(yè)中的位置，如果要獲取滾動(dòng)條滾動(dòng)的距離，需要使用scrollTop、scrollLeft屬性在頁(yè)面中有很多事件可以用來(lái)觸發(fā)瀏覽器的行為，如表11.5所示的事件是制作該效果的常用事件。（1）圖片放在一個(gè)層中，使用CSS樣式設(shè)置層的初始位置（2）頁(yè)面加載時(shí)，獲取圖片所在層的具體位置，即頁(yè)面的left和top位置。（3）獲取頁(yè)面初始位置時(shí)，要判斷當(dāng)前瀏覽器的類(lèi)型，本例只判斷是IE還是fireFox（4）當(dāng)滾動(dòng)條滾動(dòng)時(shí)，獲取滾動(dòng)條距離頁(yè)面頂端和左側(cè)的距離，同時(shí)改變層距離頂端和左側(cè)的位置。dverObject=document.getElementById("adver");//獲得層對(duì)象

if(adverObject.currentStyle){adverTop=parseInt(adverObject.currentStyle.top);adverLeft=parseInt(adverObject.currentStyle.left);}else{ adverTop=parseInt(document.defaultView.getComputedStyle(adverObject,null).top);adverLeft=parseInt(document.defaultView.getComputedStyle(adverObject,null).left); }adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+"px";adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft)+"px";在頁(yè)面中有一個(gè)層，使用style屬性獲取層在頁(yè)面中的位置。functioninix(){adverObject=document.getElementById("adver");//獲得層對(duì)象……}functionmove(){adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+"px";adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft)+"px";}window.onload=inix;window.onscroll=move;……實(shí)例11-5：制作隨鼠標(biāo)滾動(dòng)的廣告圖片11.4使用下拉列表框?qū)崿F(xiàn)級(jí)聯(lián)效果下拉框聯(lián)動(dòng)效果用于在兩個(gè)或多個(gè)內(nèi)容相關(guān)聯(lián)的下拉框中選取數(shù)據(jù)，比如地址填寫(xiě)時(shí)，需要先選擇省份再根據(jù)省份選擇城市下拉列表框使用<select>和<option>兩個(gè)標(biāo)簽共同創(chuàng)建。Select對(duì)象代表HTML表單中的一個(gè)下拉列表框，option對(duì)象代表HTML表單中下拉列表框中的一個(gè)選項(xiàng)。11.4.1下拉列表框?qū)ο?、select對(duì)象常用事件、方法和屬性2、Option對(duì)象常用屬性text：設(shè)置或返回某個(gè)選項(xiàng)的純文本值value：設(shè)置或返回被送往服務(wù)器的值Select對(duì)象的屬性應(yīng)用……functionget(){varindex=document.getElementById("fruit").selectedIndex;varlen=document.getElementById("fruit").length;varshow=document.getElementById("show");show.innerHTML="被選選項(xiàng)的索引號(hào)為："+index+"<br/>下拉列表選項(xiàng)數(shù)目為："+len;}……實(shí)例11-6：select對(duì)象的屬性值3、add()方法Add方法用于向<select>中添加一個(gè)<option>標(biāo)簽，語(yǔ)法如下。下拉列表框?qū)ο?add(new,old)new表示新添加到old之前的option對(duì)象，如果old為null，則new直接添加到select的末尾。也可以采用簡(jiǎn)單的添加下拉菜單方法。varnewoption=document.createElement(“option”);newoption.text=”南昌市”;//列表中顯示的值newoption.value=”0791”;//送到服務(wù)器的值document.getElementById(“city”).add(newoption,null);varnewoption=newOption(“南昌市”,”0791”);document.getElementById(“city”).add(newoption,null);根據(jù)onchange事件來(lái)判斷選擇了哪個(gè)省，然后顯示對(duì)應(yīng)的城市列表?！璿arprovince=document.getElementById("selProvince").value;varcity=document.getElementById("selCity");city.options.length=0; switch(province){ case"江西省": city.add(newOption("南昌市","南昌市"),null); city.add(newOption("九江市","九江市"),null); break; …… }……實(shí)例11-7：省市級(jí)聯(lián)效果11.4.2數(shù)組1、數(shù)組創(chuàng)建數(shù)組var數(shù)組名稱(chēng)=newArray(size);為數(shù)組元素賦值varfruit=newArray("apple","orange","peach","bananer");訪(fǎng)問(wèn)數(shù)組數(shù)組名[下標(biāo)]2、數(shù)組的常用屬性和方法3、數(shù)組方法的應(yīng)用使用sort（）方法對(duì)數(shù)組元素進(jìn)行排序，然后使用join（）方法把數(shù)組元素放入一個(gè)字符串中，并使用“-”分隔數(shù)組元素，最后顯示在頁(yè)面中?！璿arfruit=newArray(4);fruit[0]="apple";fruit[1]="orange";fruit[2]="peach";fruit[3]="bananer";fruit.sort();varstr=fruit.join("-");document.write(str);……實(shí)例11-8：數(shù)組應(yīng)用1、采用數(shù)組的文字下標(biāo)2、讀取數(shù)組中的元素值varcityList=newArray();cityList['江西省']=['南昌市','九江市'];cityList['河南省']=['鄭州市','洛陽(yáng)市'];cityList['湖北省']=['武漢市','宜昌市'];for(variincityList){document.getElementById("show").innerHTML+=i+"<br/>";}for(varjincityList){for(varkincityList[j]){ document.getElementById("show").innerHTML+=cityList[j][k]+"  ";}document.getElementById("show").innerHTML+="<br/>“;}11.4.3數(shù)組方式實(shí)現(xiàn)省市級(jí)聯(lián)效果3、實(shí)現(xiàn)思路創(chuàng)建兩個(gè)下拉列表框，分別顯示省份和城市，選擇某一個(gè)省份時(shí)，使用onchange事件調(diào)用函數(shù)（changeCity()）使城市下拉列表框中顯示對(duì)應(yīng)的城市，創(chuàng)建一個(gè)表示省份和城市對(duì)應(yīng)的數(shù)組cityList<selectid="selProvince"onchange="changeCity()"style="width:100px"><option>--選擇省份--</option></select><selectid="selCity"style="width:100px"><option>--選擇城市--</option></select>varcityList=newArray();cityList['北京市']=['朝陽(yáng)區(qū)','東城區(qū)','西城區(qū)','海淀區(qū)','宣武區(qū)','豐臺(tái)區(qū)','懷柔','