DOM练习2

Posted 2020-10-24 西科之巅、不可能

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM练习2相关的知识，希望对你有一定的参考价值。

 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             var table = 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">&gt;&gt;</button>
137             <button id="moveAllBtn">&gt;&gt;&gt;</button>
138             <button id="backBtn">&lt;&lt;</button>
139             <button id="backAllBtn">&lt;&lt;&lt;</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的主要内容，如果未能解决你的问题，请参考以下文章

DOM基础练习代码

JQuery---选择器DOM节点操作练习

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段

JS常用代码片段2-值得收藏

jQuery的DOM操作