点击登陆显示登陆框
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-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-2px;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获得对象-->