DOM练习1

Posted 西科之巅、不可能

tags:

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

技术分享图片 
 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         .div1{
 8             width: 600px;
 9             height:371px;
10             background-color: lightgray;
11         }
12     </style>
13     <script type="text/javascript">
14         window.onload=function(){
15             var remainTime = 10
16             var registerBtn = document.getElementById("registerBtn");
17             var intervalId = setInterval(function(){
18                 remainTime--;
19                 if(remainTime>0)
20                 {
21                     registerBtn.value="请先阅读服务条款"+"("+remainTime+")";
22                 }
23                 else
24                 {
25                     clearInterval(intervalId);
26                     registerBtn.disabled=false;
27                     registerBtn.value="注册";
28                 }
29             },1000)
30         }
31     </script>
32 </head>
33 <body>
34 <div class="div1">服务条款。。。</div>
35 <br/>
36 <input id="registerBtn" type="submit" value="请先阅读服务条款(10)" disabled="disabled"/>
37 </body>
38 </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         #table td{
 8             width:40px;
 9             height:19px;
10             background-color: #F3F3F3;
11             boder:1px solid #D0D0D0;
12             color:#BBBBBB;
13             line-height: 9px;;
14         }
15     </style>
16 
17 
18 
19 </head>
20 <body>
21     <form>
22         <label for="password">密码：</label>
23         <input id="password" type="password" name="password"/>
24         <table id="table" border="0" cellpadding="0" cellspacing="0" style="display:inline-table">
25             <tr align="center">
26                 <td id="td1">弱</td>
27                 <td id="td2">中</td>
28                 <td id="td3">强</td>
29             </tr>
30         </table>
31     </form>
32 </body>
33 </html>
34 <script type="text/javascript">
35 
36             function checkPassword(value){
37                 if(!value){
38                     return 1;
39                 }
40                 if(value.length<6)
41                 {
42                     return 1;
43                 }
44                 if(value.length>=8 && value.match(/[0-9]/)&&value.match(/[a-z]/))
45                 {
46                     return 3;
47                 }
48                 return 2;
49             }
50             setInterval(function(){
51                 var passwordElement = document.getElementById("password");
52                 var passwordLevel = checkPassword(passwordElement.value);
53                 switch (passwordLevel)
54                 {
55                     case 1:document.getElementById("td1").style.backgroundColor="#ff8040";
56                         document.getElementById("td2").style.backgroundColor=null;
57                         document.getElementById("td3").style.backgroundColor=null;
58                         break;
59                     case 2:document.getElementById("td1").style.backgroundColor=null;
60                                             document.getElementById("td2").style.backgroundColor="#ffff6f";
61                                             document.getElementById("td3").style.backgroundColor=null;
62                                             break;
63                     case 3:document.getElementById("td1").style.backgroundColor=null;
64                                                                 document.getElementById("td2").style.backgroundColor=null;
65                                                                 document.getElementById("td3").style.backgroundColor="#ffff6f";
66                                                                 break;
67                 }
68             },1000)
69 </script>
密码强度检测
技术分享图片 
 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 
 7 
 8 
 9 </head>
10 <body>
11     <button id="btn">关灯</button>
12     <div style="width:600px;height:371px;background-color: lightgray">模拟网页视频播放器。。。</div>
13 </body>
14 </html>
15 <script type="text/javascript">
16     var body = document.body;
17     var btn = document.getElementById("btn");
18     btn.onclick=function(){
19         if(this.innerHTML == "关灯"){
20             body.style.backgroundColor="black";
21             this.innerHTML="开灯";
22         }else{
23             body.style.backgroundColor=null;
24             this.innerHTML="关灯";
25         }
26     }
27 </script>
模拟网页开关灯
技术分享图片 
 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     <script type="text/javascript">
 7         window.onload=function(){
 8             var imgBug = document.getElementById("imgBug");
 9             imgBug.style.position="absolute";
10             document.onmousemove = function(){
11                 var x = event.clientX;
12                 var y = event.clientY;
13 
14                 imgBug.style.left=x-imgBug.offsetWidth+"px";
15                 imgBug.style.top=y+"px";
16             }
17         }
18     </script>
19 
20 
21 </head>
22 <body>
23     <img id="imgBug" src="跟屁虫.png" alt="跟屁虫"/>
24 </body>
25 </html>
跟屁虫
技术分享图片 
 1  <table id="mailTable" border="0" cellpadding="0" cellspacing="0" style="width: 600px">
 2         <tr><td class="firstTd"></td><td>收件人</td><td>主题</td></tr>
 3         <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
 4         <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
 5         <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
 6         <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
 7         <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
 8         <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
 9         <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
10         <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
11         <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
12         <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
13     </table>
鼠标经过单元格变色
技术分享图片 
 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         .gray-text{
 8             color:gray;
 9         }
10     </style>
11     <script type="text/javascript">
12 
13         window.onload = function(){
14             var accountElement = document.getElementById("account");
15             accountElement.onfocus = function(){
16                 if(this.className=="gray-text")
17                 {
18                     this.value="";
19                     this.className=null;
20                 }
21             }
22             accountElement.onblur=function(){
23                 if(!this.value)
24                 {
25                     this.value="请使用邮箱注册";
26                     this.className="gray-text";
27                 }
28             }
29         }
30 
31     </script>
32 
33 
34 </head>
35 <body>
36 账号：<input id="account" class="gray-text" type="text" value="请使用邮箱注册"/>
37 </body>
38 </html>
焦点事件

 

以上是关于DOM练习1的主要内容，如果未能解决你的问题，请参考以下文章

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

JQuery02

DOM练习（邓邓版）

jQuery的DOM操作

05-DOM操作练习：访问关系的封装

JQuery DOM 有关代码练习