網(wǎng)頁設(shè)計(jì)教學(xué)第7天課件_第1頁
網(wǎng)頁設(shè)計(jì)教學(xué)第7天課件_第2頁
網(wǎng)頁設(shè)計(jì)教學(xué)第7天課件_第3頁
網(wǎng)頁設(shè)計(jì)教學(xué)第7天課件_第4頁
網(wǎng)頁設(shè)計(jì)教學(xué)第7天課件_第5頁
已閱讀5頁，還剩12頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

網(wǎng)頁設(shè)計(jì)第7天課件關(guān)于頁面的校驗(yàn)的設(shè)計(jì)框架一個(gè)表單可能N個(gè)元素要校驗(yàn)假設(shè)每個(gè)元素有一個(gè)獨(dú)立的校驗(yàn)函數(shù),checkFiled();//field＝＝字段校驗(yàn)成功時(shí)，返回true校驗(yàn)失敗時(shí)，返回false校驗(yàn)失敗時(shí)，要給出操作提示最后要有總的校驗(yàn)處理varcheck1=check字段1();varcheck2=check字段2();varcheckN=check字段N();總的校驗(yàn)checkvarcheck=check1&&check&&checkN;關(guān)于頁面校驗(yàn)的處理示例思路每個(gè)字段獨(dú)立校驗(yàn) varcheck1=... varcheck2=... varcheck3=...總的varcheck=check1&&check2&&check3&&...;示例如下<script>//<!--function處理頁面校驗(yàn)(){varcheck1= check用戶ID(); varcheck2=check姓名(); varcheck3=check年齡(); varcheck4=check電話號碼(); varcheck5=check郵箱(); varcheck=check1&&check2&&check3&&check4&&check5; alert(check); }functioncheck用戶ID(){ //取錄入元素標(biāo)簽對象(<input>標(biāo)簽)obj,是一個(gè)錄入類元素，或錄入類標(biāo)簽 varobj=document.user.userId; //任何一個(gè)錄入類標(biāo)簽，均有value屬性 varvalue=obj.value;// varvalue=document.user.userId.value;//下面對value進(jìn)行校驗(yàn)，要求是:4位整型數(shù)字//校驗(yàn)1：長度varlen=value.length;//取得value字符串的長度 if(len!=4){ alert("有錯，用戶ID只能為4位。。。"); returnfalse; } //校驗(yàn)2:是否整數(shù) varcheck1=value.indexOf("."); if(check1>=0){ alert("有錯，用戶ID只能是整數(shù)"); returnfalse; } //校驗(yàn)3;是否數(shù)字 varcheck2=isNaN(value); if(check2){ alert("用戶ID只能是數(shù)字，不能為字符串"); returnfalse;} returntrue;}functioncheck姓名(){ varvalue=.value; //不能為空有2種方法檢驗(yàn) /* //方法1 if(value==""){ alert("有錯，姓名不能為空。。。"); returnfalse; } */ //方法2 if(value.length==0){ alert("有錯，姓名不能為空。。。"); returnfalse; } returntrue; }functioncheck年齡(){ varvalue=document.user.age.value; if(value=="") returntrue; varcheck=isNaN(value); if(check){ alert("有錯，年齡只能數(shù)值"); returnfalse; } varf=parseFloat(value);//將String類的value轉(zhuǎn)換為Float類型的f變量 if(f>=18&&f<=40) returntrue;;//可以寫else,也可以不寫 alert("年齡范圍有錯，只能是18－－40之間"); returnfalse;}functioncheck電話號碼(){ varvalue=document.user.phone.value;varlen=value.length;//取得value字符串的長度 if(len!=8){ alert("有錯，電話在只能為8位。。。"); returnfalse; } //校驗(yàn)2:是否整數(shù) varcheck1=value.indexOf("."); if(check1>=0){ alert("有錯，電話只能是整數(shù)"); returnfalse; } //校驗(yàn)3;是否數(shù)字 varcheck2=isNaN(value); if(check2){ alert("電話只能是數(shù)字，不能為字符串"); returnfalse;} returntrue;}functioncheck郵箱(){ varvalue=document.user.mail.value; if(value=="") returntrue; varindex1=value.indexOf("@");//index1>1 varindex2=value.indexOf("."); varn=index2-index1;//>1 if(index1>1&&n>1) returntrue; ; alert("有錯，郵箱不符號@.格式"); returnfalse; }//--></script><body><formname="user">處理自動回車，體會頁面錄入校驗(yàn)<hr>用戶ID只能為4位整型數(shù)字<br>姓名不能為空<br>年齡只能為18--40之間的數(shù)值,可以為空<br>郵箱錄入必須為@.格式,可以為空<br>電話只能為8位整型數(shù)字<br>性別只能"男"，或"女"的下拉<hr><tablewidth="942"border="1"><tr><tdwidth="106"><divalign="right">用戶ID：</div></td><tdwidth="212"><inputtype="text"name="userId"nextId="name"value="1234"></td><tdwidth="89"><divalign="right">姓名：</div></td><tdwidth="209"><inputtype="text"name="name"nextId="age"value="劉明"></td><tdwidth="57"><divalign="right">年齡：</div></td><tdwidth="243"><inputtype="text"name="age"value="28"nextId="phone"></td></tr><tr><td><divalign="right">電話：</div></td><td><inputtype="text"name="phone"nextId="mail"value="12345678"></td><td><divalign="right">郵箱：</div></td><td><inputtype="text"name="mail"nextId="address"></td><td><divalign="right">住址：</div></td><td><inputtype="text"name="address"value="北京清華大學(xué)20號"nextId="sex"></td></tr><tr><tdalign="right">性別：</td><td><selectname="sex"nextId="hobby1"><optionvalue="男">男</option><optionvalue="女">女</option></select> </td><tdalign="right">個(gè)人興趣</td><tdcolspan="3"> 看書：<inputtype="checkbox"name="hobby"id="hobby1"nextId="hobby2">   聽音樂：<inputtype="checkbox"name="hobby"id="hobby2"nextId="hobby3">   打球：<inputtype="checkbox"name="hobby"id="hobby3"nextId="hobby4">   游泳：<inputtype="checkbox"name="hobby"id="hobby4"nextId="hobby5">   爬山：<inputtype="checkbox"name="hobby"id="hobby5"nextId="userId"> </td></tr></table><buttononclick="處理頁面校驗(yàn)();">處理頁面校驗(yàn)()</button><divid="out">tttt</div></form></body></html>表單的按扭類型－略關(guān)于open方法用js方法打開一個(gè)獨(dú)立的網(wǎng)頁文件也可以打開遠(yuǎn)程網(wǎng)頁語法varwinObj=open(“網(wǎng)頁文件地址，相對或絕對均可”,窗口名稱);窗口名稱可以是_blank_self_parent_top自定義名稱示例如下<script>functiontestOpen(){ varurl="體會頁面校驗(yàn)-1.html"; varwinObj=open(url,"_blank"); }</script><body>用JS方法打開獨(dú)立的<divonclick="testOpen();">網(wǎng)頁文件</div></body></html>關(guān)于prompt彈出一個(gè)窗口，執(zhí)行客戶輸入，點(diǎn)擊確認(rèn)時(shí)，可以得到客戶輸入的文本信息語法varstr=prompt(“提示輸入的標(biāo)題項(xiàng)”,”默認(rèn)的輸入項(xiàng)，可以不寫”);示例如下<script>functiontestPrompt(){ varstr=prompt("請輸入你的姓名","小芳"); alert(str); }</script><body>體會網(wǎng)頁幾個(gè)默認(rèn)方法<buttononclick="testPrompt();">testPrompt();</button></body></html>

關(guān)于confirm彈出一個(gè)對話，有2個(gè)選項(xiàng)確認(rèn)返回true取消返回false語法為varcheck=confirm(“確認(rèn)操作的提示信息”);返回的check=true點(diǎn)確認(rèn)按鈕false點(diǎn)取消按鈕示例如下functiontestConfirm(){ varcheck=confirm("你確認(rèn)轉(zhuǎn)賬嗎？"); alert(check); }</script><body>體會網(wǎng)頁幾個(gè)默認(rèn)方法<hr><buttononclick="testPrompt();">testPrompt();</button><hr><buttononclick="testConfirm();">testConfirm();</button><hr></body></html>

關(guān)于模態(tài)對話框，showModalDialog打開一個(gè)新的網(wǎng)頁但打開新網(wǎng)頁后，原來的網(wǎng)頁不能繼續(xù)工作，直到新網(wǎng)頁關(guān)閉，原來網(wǎng)頁才可以繼續(xù)工作示例如下functiontest模態(tài)對話框(){ varurl="體會頁面校驗(yàn)-1.html"; //varwinObj=open(url,"_blank"); //在新網(wǎng)頁沒有關(guān)閉時(shí)，可以回到原來的網(wǎng)頁 varobj=showModalDialog(url); //在新網(wǎng)頁打開后，沒有關(guān)閉前，不可以回到原來的網(wǎng)頁，關(guān)閉后，可以回到原來網(wǎng)頁 }</script><body>體會網(wǎng)頁幾個(gè)默認(rèn)方法<hr><buttononclick="testPrompt();">testPrompt();</button><hr><buttononclick="testConfirm();">testConfirm();</button><hr><buttononclick="test模態(tài)對話框();">test模態(tài)對話框()</button><hr></body></html>

關(guān)于父目錄在windows中父目錄表示方法用”..”表示用一個(gè)點(diǎn)表示當(dāng)前目錄,”.”操作如下頁面超鏈接—略同一個(gè)網(wǎng)頁的書簽處理－略關(guān)于站點(diǎn)的概念站點(diǎn)就是網(wǎng)站的根目錄表示網(wǎng)站根目錄所在節(jié)點(diǎn)不是首頁首頁是網(wǎng)站任何一個(gè)指定的文件簡單地說，就是為一個(gè)網(wǎng)站設(shè)置根目錄操作如下頁面站點(diǎn)設(shè)計(jì)網(wǎng)頁可以可視化操作站點(diǎn)內(nèi)網(wǎng)頁文件操作如下在站點(diǎn)，右鍵，新建文件框架集設(shè)計(jì)框架集frameset=frameset框架集(合)N個(gè)文件放同一個(gè)網(wǎng)頁中，表面上看起來，象一個(gè)網(wǎng)頁似的這是一種最簡單的布局方式每一個(gè)網(wǎng)頁可以獨(dú)立地工作并且可以從一個(gè)網(wǎng)頁，控制另外一個(gè)網(wǎng)頁操作方法光標(biāo)停在每個(gè)獨(dú)立的窗口，進(jìn)行可視化操作，然后再進(jìn)入代碼窗口，寫相應(yīng)的網(wǎng)頁代碼對此窗口，也就是frame作存盤處理幀設(shè)計(jì)原理由2個(gè)或以上窗體構(gòu)成一個(gè)集合這個(gè)集合稱一個(gè)frameset每一個(gè)窗口可以是一個(gè)獨(dú)立的幀，frame也就是一個(gè)網(wǎng)頁文件每一個(gè)窗口可以設(shè)想為一個(gè)frameset構(gòu)成方法是<frameset>--將此frmeset當(dāng)成一個(gè)大窗口中的小窗口<frame...><frame...></frameset>混合方式<frameset><frame...><frameset...><frame...><frameset....></frameset>

垂直分割，rows=”第1個(gè)窗口大小，第2個(gè)窗口大小，第n個(gè)窗口大小”可以其他窗口固定的情況下，對其中某一個(gè)大小設(shè)為”*”,<framesetrows="55,*,80"framespacing="5"border="5"><framesrc="frame-TopWindow.html"name="topFrame"scrolling="No"title="topFrame"><framesetcols="178,*"framespacing="2"border="5"><framesrc="frame-LeftWindow.html"name="leftFrame"scrolling="yes"title="leftFrame"><framesrc="frame-MainWindow.html"name="mainFrame"title="mainFrame"></frameset><framesrc="frame-TopWindow.html"name="topFrame"scrolling="No"title="topFrame"></frameset>水平分割，cols=”第1個(gè)窗口大小，第2個(gè)窗口大小，第n個(gè)窗口大小”任何一個(gè)frameset內(nèi)部可以是N個(gè)frame而內(nèi)部的任何一個(gè)frame，可以換為frameset這就是框架集設(shè)計(jì)的最基本原理可以在任何幀文件進(jìn)行超鏈接到其他窗口每個(gè)窗口可以互相兩兩控制示例如下<framesetro

溫馨提示

  • 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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論