DOM动态操纵控件案例

 

点击登陆显示登陆框

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>event deal</title>
 5     <script type="text/javascript">
 6         var lg = function () {
 7             var div = document.createElement("div");
 8             var input1 = document.createElement("input");
 9             var input2 = document.createElement("input");
10             var label1 = document.createElement("label");
11             var label2 = document.createElement("label");
12             label1.htmlFor = "user";
13             label2.htmlFor = "pass";
14             label1.innerText = "用户名：";
15             label2.innerText = "密码:";
16             input1.type = "text";
17             input2.type = "text";
18             input1.id = "user";
19             input2.id = "pass";
20             
21             var br = document.createElement("br");
22             div.appendChild(label1);
23             
24             div.appendChild(input1);
25             div.appendChild(br);
26             div.appendChild(label2);
27             div.appendChild(input2);
28             document.body.appendChild(div);
29             input2.style.left = input1.style.left;
30         }
31 
32     </script>
33     
34 </head>
35 <body>
36     <input type="button"value="登陆"onclick="lg()"/>
37 </body>
38 </html>

点击按钮使文本框连续变大

 1 <html><!--制作一个会跟着鼠标走的图像，还有控件定位的案例-->
 2 <head>
 3     <title>document practise</title>
 4     <style type="text/css">
 5         .bian
 6         {
 7             border-color:yellow;
 8             border-width:1px;
 9             border-style:solid;
10         }
11     </style>
12     <script type="text/javascript">
13         var intervalid;
14         var incres = function () { intervalid = setInterval("IncreseSquare()", 500); this.disabled=true;}
15         function IncreseSquare()
16         {
17             var div = document.getElementById("divchange");
18            
19             var oldwidth = div.style.width;
20             oldwidth = parseInt(oldwidth, 10) + 5;
21             div.style.width = oldwidth.toString() + "px";
22             var oldheight = div.style.height;
23             div.style.height = (parseInt(oldheight, 10) + 10).toString() + "px";
24         }
25 
26     </script>
27 </head>
28 <body>
29    <div id="divchange"style="border-style:solid;border-width:2px;width:20px;height:20px">
30        这里有很多很多的字，你们也许可以看到这些字真的好多好多的，哈哈。
31        你们也许不知道这些字是用来干什么的哦，其实就是凑字数的，好啦差不多了。
32    </div>
33     <input type="button"value="扩大"onclick="incres()"/>
34     <input type="button"value="停止"onclick="clearInterval(intervalid)"/>
35 </body>
36 </html>

图片随着鼠标移动变化

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>多向变化图片</title>
 5     <script type="text/javascript">
 6         function DynasticChange()
 7         {
 8             var pic = document.getElementById("img");
 9             if (window.event.x < (pic.x + 100) && window.event.y < (pic.y + 100))
10                 pic.src = "images/leftup.jpg";
11             else if(window.event.x>(pic.x+100)&&window.event.x<(pic.x+200)&&window.event.y < (pic.y + 100))
12                 pic.src = "images/up.jpg";
13             else if(window.event.x>=(pic.x+200)&&window.event.y < (pic.y + 100))
14                 pic.src = "images/rightup.jpg";
15             else if(window.event.y>=(pic.y+100)&&window.event.y<(pic.y+200)&&window.event.x < (pic.x + 100))
16                 pic.src = "images/left.jpg";
17             else if (window.event.y > (pic.y + 100) && window.event.y < (pic.y + 200) && window.event.x > (pic.x + 200))
18                 pic.src = "images/right.jpg";
19             else if (window.event.y >= (pic.y + 200) && window.event.x <= (pic.x + 100))
20                 pic.src = "images/leftdown.jpg";
21             else if (window.event.y >= (pic.y + 200) &&  window.event.x >(pic.x + 100) && window.event.x <(pic.x + 200))
22                 pic.src = "images/down.jpg";
23             else if (window.event.y >= (pic.y + 200) && window.event.x >= (pic.x + 200))
24                 pic.src = "images/rightdown.jpg";
25             else
26                 pic.src = "images/front.jpg";
27         }
28         function withdrawpic()
29         {
30             var pic = document.getElementById("img");
31             pic.src = "";
32         }
33        
34      </script>
35 </head>
36 <body bgcolor="blue">
37     <div>
38         <table align="center">
39             <tr><td width="301" height="301">
40             <img id="img"  onmousemove="DynasticChange()" onmouseout="withdrawpic()" width="300" height="300" />
41             </td>
42             </tr>
43         </table>
44     </div>
45 </body>
46 </html>

点击按钮颜色隔行变色

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title>超链接变色</title>
  5    <script type="text/javascript">
  6        function InitEvent()
  7        {
  8            var As = document.getElementsByTagName("a");
  9            for (var key in As)
 10            {
 11                As[key].onclick =Process;
 12            }
 13        }
 14        function Process()
 15        {
 16            window.event.returnValue = false;
 17            this.style.color = "red";
 18            var As = document.getElementsByTagName("a");
 19            for (var key in As) {
 20                if (As[key] != this)
 21                    As[key].style.color = "black";
 22            }
 23        }
 24        function ChangeColor()
 25        {
 26            var table = document.getElementById("table1");
 27            var trs = table.getElementsByTagName("tr");
 28            for(var i=0;i<trs.length;i++)
 29            {
 30                if (i%2 == 0) trs[i].style.background = "yellow";
 31                else trs[i].style.background = "green";
 32            }
 33        }
 34        function trevent() {
 35            var table = document.getElementById("table1");
 36            var trs = table.getElementsByTagName("tr");
 37            for (var i = 0; i < trs.length; i++) {
 38                
 39                trs[i].onclick = otherdeal;
 40                
 41                
 42            }
 43            
 44        }
 45        function dealcolor()
 46        {
 47            this.style.background = "black";
 48        }
 49        function recovercolor()
 50        {
 51            this.style.background = "white";
 52        }
 53        function otherdeal()
 54        {
 55            var table = document.getElementById("table1");
 56            var trs = table.getElementsByTagName("tr");
 57            for (var i = 0; i < trs.length; i++) {
 58                if (trs[i] == this)
 59                    trs[i].style.background = "black";
 60                else
 61                    trs[i].style.background = "white";
 62                
 63            }
 64        }
 65    </script>
 66 </head>
 67 <body onload="InitEvent(); trevent();">
 68     <a href="HtmlPageWrite.html">链接一</a>
 69     <a href="HtmlPageWrite.html">链接二</a>
 70     <a href="HtmlPageWrite.html">链接三</a>
 71     <table border="1" align="center" id="table1">
 72         <tr><td width="400" height="30"></td></tr>
 73         <tr><td width="400" height="30"></td></tr>
 74         <tr><td width="400" height="30"></td></tr>
 75         <tr><td width="400" height="30"></td></tr>
 76         <tr><td width="400" height="30"></td></tr>
 77         <tr><td width="400" height="30"></td></tr>
 78         <tr><td width="400" height="30"></td></tr>
 79         <tr><td width="400" height="30"></td></tr>
 80         <tr><td width="400" height="30"></td></tr>
 81         <tr><td width="400" height="30"></td></tr>
 82         <tr><td width="400" height="30"></td></tr>
 83         <tr><td width="400" height="30"></td></tr>
 84         <tr><td width="400" height="30"></td></tr>
 85         <tr><td width="400" height="30"></td></tr>
 86         <tr><td width="400" height="30"></td></tr>
 87         <tr><td width="400" height="30"></td></tr>
 88         <tr><td width="400" height="30"></td></tr>
 89         <tr><td width="400" height="30"></td></tr>
 90         <tr><td width="400" height="30"></td></tr>
 91         <tr><td width="400" height="30"></td></tr>
 92         <tr><td width="400" height="30"></td></tr>
 93         <tr><td width="400" height="30"></td></tr>
 94         <tr><td width="400" height="30"></td></tr>
 95         <tr><td width="400" height="30"></td></tr>
 96     </table>
 97     <input type="button" value="变色"onclick="ChangeColor()"/>
 98 
 99 </body>
100 </html>
101 
102 <!--onclick 的响应函数是匿名函数，再匿名函数里可疑得到this对象-->
103 <!--但是对于调用函数实际上是onclick响应函数内调用的一个函数，不能通过this获得对象-->

 

posted @ 2014-11-12 09:34  SYTM  阅读(180)  评论(0)  编辑  收藏  举报