DOM練習2
阿新 • • 發佈：2018-02-19
.class cor class onkeyup char w3c var parseint parse 
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 5 <title></title> 6 <style type="text/css"> 7 td{ 8全選、全不選、反選border-bottom:1px solid lightgray; 9 width:100px; 10 height:25px; 11 } 12 .firstTd{ 13 width:30px; 14 } 15 </style> 16 <script type="text/javascript"> 17 18 window.onload = function(){ 19 vartable = document.getElementById("mailTable"); 20 var trs = table.getElementsByTagName("tr"); 21 for(var i=1;i<table.length;i++) 22 { 23 var tr = trs.item(i); 24 tr.onmouseover = function(){ 25 this.style.backgroundColor="lightgray";26 } 27 tr.onmouseout= function () { 28 this.style.backgroundColor=null; 29 } 30 } 31 var selectAllBtn = document.getElementById("selectAll"); 32 selectAllBtn.onclick=function(){ 33 var checkboxes = table.getElementsByTagName("input"); 34 for(var i=0;i<checkboxes.length;i++) 35 { 36 var checkboxElement = checkboxes.item(i); 37 checkboxElement.checked=true; 38 39 } 40 } 41 var selectNoneBtn = document.getElementById("selectNone"); 42 selectNoneBtn.onclick=function(){ 43 var checkboxes = table.getElementsByTagName("input"); 44 for(var i=0;i<checkboxes.length;i++) 45 { 46 var checkboxElement = checkboxes.item(i); 47 checkboxElement.checked=false; 48 } 49 } 50 var deselectBtn = document.getElementById("deselect"); 51 deselectBtn.onclick=function(){ 52 var checkboxes = table.getElementsByTagName("input"); 53 for(var i=0;i<checkboxes.length;i++) 54 { 55 var checkboxElement = checkboxes.item(i); 56 if(checkboxElement.checked==true) 57 { 58 checkboxElement.checked=false; 59 } 60 else 61 { 62 checkboxElement.checked=true; 63 } 64 } 65 } 66 67 68 } 69 70 </script> 71 72 73 </head> 74 <body> 75 <button id="selectAll">全選</button> 76 <button id="selectNone">全不選</button> 77 <button id="deselect">反選</button> 78 79 <table id="mailTable" border="0" cellpadding="0" cellspacing="0" style="width: 600px"> 80 <tr><td class="firstTd"></td><td>收件人</td><td>主題</td></tr> 81 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 82 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 83 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 84 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 85 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 86 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 87 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 88 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 89 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 90 <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr> 91 </table> 92 </body> 93 </html>
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .left-div{ 8 width: 185px; 9 height: 300px; 10 border: 1px solid lightgray; 11 float: left; 12 } 13 .middle-div{ 14 width: 60px; 15 height: 300px; 16 float: left; 17 text-align: center; 18 } 19 .middle-div button{ 20 margin-top: 30px; 21 } 22 .right-div{ 23 width: 185px; 24 height: 300px; 25 border: 1px solid lightgray; 26 float: left; 27 } 28 #moveDiv p{ 29 margin:2px; 30 padding: 0; 31 32 } 33 34 .selected{ 35 background-color: blue; 36 } 37 </style> 38 <script type="text/javascript"> 39 window.onload= function () { 40 var moveDiv = document.getElementById("moveDiv"); 41 var leftDiv = document.getElementById("leftDiv"); 42 var rightDiv = document.getElementById("rightDiv"); 43 var pElements = moveDiv.getElementsByTagName("p"); 44 for(var i=0;i<pElements.length;i++) { 45 var pElement = pElements.item(i); 46 pElement.onmouseover = function () { 47 this.style.backgroundColor = "lightgray"; 48 } 49 pElement.onmouseout = function () { 50 this.style.backgroundColor = null; 51 } 52 53 pElement.onclick = function () { 54 if (this.className == "selected") { 55 this.className = null; 56 57 }else { 58 this.className = "selected"; 59 } 60 61 } 62 63 pElement.ondblclick = function () { 64 if (this.parentNode == leftDiv) { 65 rightDiv.appendChild(this); 66 67 } else { 68 leftDiv.appendChild(this); 69 } 70 } 71 } 72 73 var moveBtn = document.getElementById("moveBtn"); 74 moveBtn.onclick = function () { 75 var pElements = leftDiv.getElementsByTagName("p"); 76 for (var i = 0; i <pElements.length; i++) { 77 var pElement = pElements.item(i); 78 if (pElement.className == "selected") { 79 rightDiv.appendChild(pElement); 80 pElement.className = null; 81 i--; 82 } 83 } 84 } 85 86 var backBtn = document.getElementById("backBtn"); 87 backBtn.onclick = function () { 88 89 var pElements = rightDiv.getElementsByTagName("p"); 90 for (var i = 0; i <pElements.length; i++) { 91 var pElement = pElements.item(i); 92 if (pElement.className == "selected") { 93 leftDiv.appendChild(pElement); 94 pElement.className = null; 95 i--; 96 } 97 98 } 99 100 } 101 102 var moveAllBtn = document.getElementById("moveAllBtn"); 103 moveAllBtn.onclick=function(){ 104 var pElements = leftDiv.getElementsByTagName("p"); 105 while(pElements.length>0){ 106 var pElement = pElements.item(0); 107 rightDiv.appendChild(pElement) 108 pElement.className=null; 109 } 110 } 111 112 // <<< 113 var backAllBtn = document.getElementById("backAllBtn"); 114 backAllBtn.onclick=function(){ 115 var pElements = rightDiv.getElementsByTagName("p"); 116 while(pElements.length>0){ 117 var pElement = pElements.item(0); 118 leftDiv.appendChild(pElement) 119 pElement.className=null; 120 } 121 } 122 123 } 124 </script> 125 126 </head> 127 <body> 128 <div id="moveDiv"> 129 <div id="leftDiv" class="left-div"> 130 <p>蛋蛋</p> 131 <p>建國</p> 132 <p>賴寶</p> 133 <p>澆水</p> 134 </div> 135 <div id="middleDiv" class="middle-div"> 136 <button id="moveBtn">>></button> 137 <button id="moveAllBtn">>>></button> 138 <button id="backBtn"><<</button> 139 <button id="backAllBtn"><<<</button> 140 </div> 141 <div id="rightDiv" class="right-div"></div> 142 <div style="clear:both"></div> 143 </div> 144 </body> 145 </html>列表移動
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 5 <title>註冊頁面</title> 6 <style type="text/css"> 7 .grayText{ 8 color:gray; 9 } 10 #table td{ 11 width:40px; 12 height:19px; 13 background-color:#F3F3F3; 14 border:1px solid #D0D0D0; 15 color:#BBBBBB; 16 line-height:9px; 17 } 18 </style> 19 <script type="text/javascript"> 20 var accountElement; 21 var passwordElement; 22 var ageElement; 23 var formElement; 24 //檢查value是否符合郵箱格式 25 function checkAccount(value){ 26 return /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(value); 27 } 28 window.onload=function(){ 29 accountElement=document.getElementById("account"); 30 accountElement.onfocus= function () { 31 if(this.className=="grayText") 32 { 33 this.value=""; 34 this.className=null; 35 } 36 37 } 38 accountElement.onblur=function(){ 39 if(!this.value) 40 { 41 this.className="grayText"; 42 this.value="請使用郵箱註冊" 43 } 44 else 45 { 46 if(!checkAccount(this.value)) 47 { 48 this.style.backgroundColor="coral"; 49 } 50 else 51 { 52 this.style.backgroundColor="lightgreen" 53 } 54 55 } 56 } 57 58 passwordElement = document.getElementById("password"); 59 passwordElement.onkeyup=function(){ 60 switch(checkPassword(this.value)) 61 { 62 case 1: 63 { 64 document.getElementById("td1").style.backgroundColor="coral"; 65 document.getElementById("td2").style.backgroundColor=null; 66 document.getElementById("td3").style.backgroundColor=null; 67 break; 68 } 69 case 2: 70 { 71 document.getElementById("td1").style.backgroundColor="lightgreen"; 72 document.getElementById("td2").style.backgroundColor="lightgreen"; 73 document.getElementById("td3").style.backgroundColor=null; 74 break; 75 } 76 case 3: 77 { 78 document.getElementById("td1").style.backgroundColor="green"; 79 document.getElementById("td2").style.backgroundColor="green"; 80 document.getElementById("td3").style.backgroundColor="green"; 81 break; 82 } 83 } 84 } 85 function checkPassword(value) 86 { 87 if(!value) 88 { 89 return 1; 90 } 91 if(value.length<6) 92 { 93 return 1; 94 } 95 if(value.length>8 && /[0-9]/.test(value) && /[a-z]/.test(value) && /[A-Z]/.test(value)) 96 { 97 return 3; 98 } 99 return 2; 100 } 101 ageElement=document.getElementById("age"); 102 ageElement.onkeyup=function(){ 103 if(event.keyCode<48||event.keyCode>57) 104 { 105 if(event.keyCode==8) 106 { 107 return true; 108 } 109 return false; 110 } 111 var result = checkAge(this.value); 112 if(result) 113 { 114 this.style.backgroundColor="lightgreen"; 115 } 116 else 117 { 118 this.style.backgroundColor="coral"; 119 } 120 121 } 122 function checkAge(value) 123 { 124 if(!value) 125 { 126 return false; 127 } 128 if(parseInt(value)<0||parseInt(value)>150) 129 { 130 return false; 131 } 132 else 133 { 134 return true; 135 } 136 } 137 var message=""; 138 formElement=document.getElementById("form"); 139 formElement.onsubmit=function(){ 140 if(!checkAccount(accountElement.value)) 141 { 142 message +="賬號不符合郵箱註冊規則\n"; 143 } 144 if(checkPassword(passwordElement.value)!=3) 145 { 146 message +="密碼強度不夠\n"; 147 } 148 if(!checkAge(ageElement.value)) 149 { 150 message +="請輸入[0-150]大小的年齡"; 151 } 152 if(message) 153 { 154 alert(message); 155 return false; 156 } 157 } 158 159 } 160 161 </script> 162 163 </head> 164 <body> 165 <form id="form" action="register"> 166 <label for="account">賬號：</label> 167 <input id="account" class="grayText" type="text" name="account" value="請使用郵箱註冊"/><br/> 168 <label for="password">密碼：</label> 169 <input id="password" type="password" name="password"/> 170 <table id="table" border="0" cellpadding="0" cellspacing="0" style="display: inline-table;"> 171 <tr align="center"> 172 <td id="td1">弱</td> 173 <td id="td2">中</td> 174 <td id="td3">強</td> 175 </tr> 176 </table> 177 <br/> 178 <label for="age">年齡：</label> 179 <input id="age" type="text" name="age"/><br/> 180 <label>性別：</label> 181 <input type="radio" name="gender" checked="checked" value="男"/>男 182 <input type="radio" name="gender" value="女"/>女<br/> 183 <label>愛好：</label> 184 <input type="checkbox" name="hobbies" value="讀書"/>讀書 185 <input type="checkbox" name="hobbies" value="音樂"/>音樂 186 <input type="checkbox" name="hobbies" value="跑步"/>跑步 187 <input type="checkbox" name="hobbies" value="旅行"/>旅行<br/> 188 189 <label>學歷：</label> 190 <select name="degree"> 191 <option value="本科">本科</option> 192 <option value="中學">中學</option> 193 <option value="大專">大專</option> 194 <option value="研究生">研究生</option> 195 </select> 196 <br/> 197 <input type="reset" value="重置"/> 198 <input type="submit" value="註冊"/> 199 200 </form> 201 </body> 202 </html>表單檢測
DOM練習2