Dom編程練習程序(11-17)_第1頁
Dom編程練習程序(11-17)_第2頁
Dom編程練習程序(11-17)_第3頁
Dom編程練習程序(11-17)_第4頁
Dom編程練習程序(11-17)_第5頁
已閱讀5頁，還剩14頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

程序十一、完成一個與css手冊中一樣的示例。 通過下拉菜單選擇顯示指定樣式屬性的使用效果實現(xiàn)以上圖形效果，程序代碼如下：<html>*************************************************************************<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無標題文檔</title><styletype="text/css">#cssid{ height:80px; width:160px; background-color:#FFCC00; }#textid{ background-color:#CCCCCC; width:300px; }</style><scripttype="text/javascript"src="doctool.js"></script><scripttype="text/javascript">functionchange(){ varselNode=byId("selid"); varvalue=selNode.options[selNode.selectedIndex].value; //alert(value); vardivNode1=byId("cssid"); vardivNode2=byId("textid"); divNode1.style.textTransform=value; divNode2.innerText="text-transform:"+value+";";}</script></head><body><divid="cssid"> Goodgoodstudy,Daydayup!</div><p></p><selectid="selid"onchange="change()"> <optionvalue="none">--text-transform--</option><optionvalue="capitalize">首字母大寫</option><optionvalue="uppercase">所有字母大寫</option> <optionvalue="lowercase">所有字母小寫</option></select><p></p><divid="textid"> text-transform:none;</div></body></html>************************************************************************程序十二、Css樣式的分層顯示效果獲取鼠標的坐標，讓指定的區(qū)域隨著鼠標移動。 獲取鼠標坐標：event.x,event.y； 指定區(qū)域隨鼠標移動其實就是改變了指定區(qū)域的left、top的值。這里需要用到的事件：body對象的onmousemove事件。還需要用到一個css樣式。直接定義頁面，所有的區(qū)域都在同一層次。為了對某一個區(qū)域進行定位。將該區(qū)域分離出來，分離到另一個層次，用到了css中的position屬性。<htmlxmlns="/1999/xhtml">******************************************<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無標題文檔</title><styletype="text/css">#bodyid{ border:#0000001pxsolid; height:600px; width:800px; } </style><htmlxmlns="/1999/xhtml">********************************<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無標題文檔</title><styletype="text/css">tabletda:link,tabletda:visited{ text-decoration:none; color:#000066; }table{ border:#0000661pxsolid; }</style><scripttype="text/javascript"src="doctool.js"></script><scripttype="text/javascript">varcount=1;functionaddFile(){ vartabNode=byTag("table")[0]; vartrNode=tabNode.insertRow(); trNode.id="tr_"+count; vartdNode_file=trNode.insertCell(); vartdNode_del=trNode.insertCell(); tdNode_file.innerHTML="<inputtype='file'/>"; tdNode_del.innerHTML="<ahref='javascript:void(0)'onclick='delfile("+count+")'>刪除"+count+"附件</a>"; count++; }functiondelfile(num){ vartrNode=byId("tr_"+num); /*刪除動作,可以合并成一句 vartabNode=byTag("table")[0]; vartbdNode=tabNode.childNodes[0]; tbdNode.removeChild(trNode); */ trNode.parentNode.removeChild(trNode);}functiondelfiel_1(node){ vartrNode=node.parentNode.parentNode; trNode.parentNode.removeChild(trNode);}</script></head><body><table> <tr> <td> <ahref="javascript:void(0)"onclick="addFile()">添加附件</a></td></tr></table></body></html>*******************************************************************程序十五實現(xiàn)如下圖所示功能：包含三個全選、一個取消選擇、一個反選、一個刪除所選郵件<htmlxmlns="/1999/xhtml">********************************<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無標題文檔</title><styletype="text/css">table{ border:#0000FF1pxsolid; width:70%; }tabletd,tableth{ border:#0099FF1pxsolid; }tableth{ background-color:#006600; }.one{ background-color:#FFFF99; }.two{ background-color:#33FFFF; }.over{ background-color:#006699; }</style><scripttype="text/javascript">//行顏色間隔顯示并高亮varname;functiontrColor(){ vartabNode=document.getElementsByTagName("table")[0]; vartrs=tabNode.rows; for(varx=1;x<trs.length-1;x++) { if(x%2==1) { trs[x].className="one"; } else trs[x].className="two"; trs[x].onmouseover=function() { name=this.className; this.className="over"; } trs[x].onmouseout=function() { this.className=name; } } }window.onload=function(){ trColor();}//完成checkbox的全選動作functioncheckAll(index){ varallNode=document.getElementsByName("all")[index]; varmails=document.getElementsByName("mail"); for(varx=0;x<mails.length;x++) { mails[x].checked=allNode.checked; }}//完成按鈕的選取。functioncheckByBut(num){ varmails=document.getElementsByName("mail"); for(varx=0;x<mails.length;x++) { if(num>1) mails[x].checked=!mails[x].checked; else mails[x].checked=num; }}//刪除所選郵件functiondelMail(){ if(!window.confirm("你真的要刪除所選郵件嗎？")) return; varmails=document.getElementsByName("mail"); vararr=newArray(); varpos=0; for(varx=0;x<mails.length;x++) { if(mails[x].checked) { vartrNode=mails[x].parentNode.parentNode; //trNode.parentNode.removeChild(trNode); arr[pos++]=trNode; } } for(varx=0;x<arr.length;x++) { vartrNode=arr[x]; trNode.parentNode.removeChild(trNode); } trColor();}</script></head><body><table> <tr> <th><inputtype="checkbox"name="all"onclick="checkAll(0)"/>全選</th><th>發(fā)件人</th><th>郵件名稱</th></tr><tr> <td><inputtype="checkbox"name="mail"</td><td>張三</td><td>新的郵件</td></tr> <tr> <td><inputtype="checkbox"name="mail"</td><td>張三00</td><td>新的郵件</td></tr><tr> <td><inputtype="checkbox"name="mail"</td><td>張三11</td><td>新的郵件</td></tr><tr> <td><inputtype="checkbox"name="mail"</td><td>張三22</td><td>新的郵件</td></tr><tr> <td><inputtype="checkbox"name="mail"</td><td>張三33</td><td>新的郵件</td></tr><tr> <td><inputtype="checkbox"name="mail"</td><td>張三44</td><td>新的郵件</td></tr><tr> <td><inputtype="checkbox"name="mail"</td><td>張三55</td><td>新的郵件</td></tr><tr> <td><inputtype="checkbox"name="mail"</td><td>張三66</td><td>新的郵件</td></tr><tr> <td><inputtype="checkbox"name="mail"</td><td>張三6aa</td><td>新的郵件</td></tr><tr> <td><inputtype="checkbox"name="mail"</td><td>張三cd</td><td>新的郵件</td></tr><tr> <th><inputtype="checkbox"name="all"onclick="checkAll(1)"/>全選</th><thcolspan="2"> <inputtype="button"value="全選"onclick="checkByBut(1)"/><inputtype="button"value="取消全選"onclick="checkByBut(0)"/><inputtype="button"value="反選"onclick="checkByBut(2)"/><inputtype="button"value="刪除所選郵件"onclick="delMail()"/></th></tr></table></body></html>********************************************************************程序十六、實現(xiàn)如下圖所示功能：用戶名要求5個小寫字母，密碼要求5個數(shù)字，郵箱格式”smhjx2006@163.com”<htmlxmlns="/1999/xhtml">********************************<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無標題文檔</title><styletype="text/css">#useryes,#userno{ display:none;}</style><scripttype="text/javascript"src="doctool.js"></script><scripttype="text/javascript">/*functioncheckUser(userNode){ varname=userNode.value; varnamereg=newRegExp("^[a-z]{5}$"); varspanNode=byId("userspan"); if(name.match(namereg)) { //spanNode.innerHTML="用戶名正確".fontcolor("green"); } else { //spanNode.innerHTML="錯誤的用戶名".fontcolor("red"); } }*/functioncheckUser(userNode){ varname=userNode.value; varnamereg=/^[a-z]{5}$/i;//加上參數(shù)i表示忽略大小寫 //varnamereg=newRegExp("^[a-z]{5}$"); varspanNode1=byId("useryes"); varspanNode2=byId("userno"); if(name.match(namereg)) { spanNode1.style.display="inline"; spanNode1.style.color="green"; spanNode2.style.display="none"; } else { spanNode2.style.display="inline"; spanNode2.style.color="red"; spanNode1.style.display="none"; } }functioncheckPsw(pswNode){ varpass=pswNode.value; //varpassreg=newRegExp("^\\d{5}$"); varpassreg=/^\d{5}$/; varspanNode=byId("pswspan"); if(pass.match(passreg)) spanNode.innerHTML="密碼正確".fontcolor('green'); else spanNode.innerHTML="密碼錯誤".fontcolor("red"); }functioncheckMail(mailNode){ varmail=mailNode.value; varmailreg=/^\w+@\w+(\.\w+)+$/ varspanNode=byId("mailspan"); if(mailreg.test(mail)) { spanNode.innerHTML="郵件正確".fontcolor('green'); } else { spanNode.innerHTML="郵件錯誤".fontcolor('green'); }}functioncheckForm(){ //event.returnValue=false; returnfalse;}</script></head><body><formaction=""onsubmit="returncheckForm()">用戶名稱：<inputtype="text"name="user"onblur="checkUser(this)"/><spanid="useryes">用戶名正確</span><spanid="userno">用戶名錯誤</span><br/>輸入密碼：<inputtype="text"name="psw"onblur="checkPsw(this)"/><spanid="pswspan"></span><br/>確認密碼：<inputtype="text"name="repsw"/><br/>郵件地址：<inputtype="text"name="mail"onblur="checkMail(this)"/><spanid="mailspan"></span><br/><inputtype="submit"name="提交數(shù)據"/></form></body></html>********************************************************************程序十七、利用tabletd,tableth{}組合選擇其和關聯(lián)選擇器；完成如下注冊表單事件！在沒有向表單項中輸入內容時，每個表單項下面都有提示信息。當每個表單項目輸入的格式不正確，表單項外面顯示紅色邊框，下面顯示錯誤提示信息。所有表單項都按照格式輸入后，才可以單擊“提交按鈕”進行提交。<html>*********************************************************************<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無標題文檔</title><styletype="text/css">table{ border:#0066FF1pxsolid; width:600px; border-collapse:collapse; }tabletd,tableth{ border:#0066FF1pxsolid; padding:10px; }tabletd{ background-color:#FFFF99; }tableth{ background-color:#FF6600; }#respswspan{ margin-left:115px; }.erroinfo{ color:#FF0000; display:none; }.focus{ border:#0099FF2pxsolid; }.norm{ border:#9999991pxsolid; }.error{ border:#9999992pxsolid; }</style><scripttype="text/javascript">functioninputColor(input){ input.className="norm"; input.onfocus=function() { this.className="focus"; }}window.onload=function(){ with(document.forms[0]) { inputColor(user); inputColor(psw); inputColor(repsw); inputColor(mail); }}//校驗方法functioncheck(inputNode,regex,divId){ varb=false; vardivNode=document.getElementById(divId); if(regex.test(inputNode.value)) { inputNode.className="norm"; divNode.style.display="none"; b=true; } else { inputNode.className="error"; divNode.style.display="block"; } returnb;}//校驗用戶名,老是的，麻煩，已過期functioncheckUserDemo(userNode){ varvalue=userNode.value; varregex=/^\w{3,5}$/; vardivNode=document.getElementById("userdiv"); if(regex.test(value)) { userNode.className="norm"; divNode.style.display="none"; } else { userNode.className="error"; divNode.style.display="block"; } }//校驗用戶名functioncheckUser(userNode){ varregex=/^\w{3,5}$/; returncheck(userNode,regex,"userdiv");}//校驗密碼functioncheckPsw(pswNode){ varregex=/^[a-z0-9]{3,5}$/i; returncheck(pswNode,regex,"pswdiv");}//校驗確認密碼functioncheckRepsw(repswNode){ varb=false; varvalue1=repswNode.value; varvalue2=document.getElementsByName("psw")[0].value; vardivNode=document.getElementById("repswdiv"); if(value1==value2) { repswNode.className="norm"; divNode.style.display="none"; b=true; } else { repswNode.className="error"; divNode.style.display="block"; } returnb;}//校驗mailfunctioncheckMail(mailNode){ varregex=/^\w+@\w+(\.\w+)+$/; returncheck(mailNode,regex,"maildiv");}//校驗表單functioncheckForm(formNode){ //alert(formNode.user.value); with(formNode) {if(checkUser(user)&&checkPsw(psw)&&checkRepsw(repsw)&&checkMail(mail)) event.returnValue=true; else event.returnValue=false; } }</script></head><body><!--1、定義頁面：通過觀察表單被表格所封裝，表格有五行，但此表格沒有列的概念。將單元格中的數(shù)據通過div進行封裝，以便操作。2、定義樣式。表格的樣式、div的樣式 3、動態(tài)效果 3.1在頁面加載時，將所有的輸入框默認的框線顏色以及定義時獲取焦點的框線顏色。3.2進行內容的校驗。可以通過正則表達式完成，并通過框線的樣式給用戶提示。 通過對剛才用戶名校驗的分析，發(fā)現(xiàn)代碼重復度很高，為了提高復用性，將不同的內容作為參數(shù)傳遞，將相同的內容進行函數(shù)的封裝。--><formonsubmit="checkForm(th

溫馨提示

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

評論

0/150

提交評論