原文:
一些有用的javascript实例分析(一)
本文以http://fgm.cc/learn/链接的实例索引为基础，可参见其实际效果。分析和整理了一些有用的javascript实例，相信对一些初学者有一定的帮助。本人水平有限，有许多不足的地方还望包涵，指正。废话不多说，正文以代码开始，不在代码中死去，就在代码中重生。不经历码农，如何来做攻城狮。
1 1 控制div属性 2 //参数为对象，样式属性和值 3 var changeStyle=function(elem,attr,value){ 4 elem.style[attr]=value 5 }; 6 window.onload = function () 7 { 8 var oBtn = document.getElementsByTagName("input"); 9 var oDiv = document.getElementById("div1"); 10 var oAtt = ["width","height","background","display","display"]; 11 var oVal = ["200px","200px","red","none","block"]; 12 for(var i=0,l=obtn.length;i<l;i++){ 13 oBtn[i].index=i; 14 oBtn[i].onclick=function(){ 15 //这里用this来获取i值原理是什么？好像都用闭包传值， 16 //this.index已经是onclick的局部变量了 17 //若索引值是4重置，则执行后面括号的内容(初始状态)。若不是则后面括号不执行 18 this.index==l-1&&(oDiv.style.cssText=""); 19 changeStyle(oDiv,oAtt[this.index],oVal[this.index]); 20 } 21 22 } 23 <body> 24 <div id="outer"> 25 <input type="button" value="变宽" /> 26 <input type="button" value="变高" /> 27 <input type="button" value="变色" /> 28 <input type="button" value="隐藏" /> 29 <input type="button" value="重置" /> 30 <div id="div1"></div> 31 </div> 32 </body> 33 34 2 鼠标移入和移除样式改变 35 window.onload = function () 36 { 37 var oDiv = document.getElementById("div1"); 38 //在css先设置好不同的样式，通过改变样式类名来改变效果。 39 oDiv.onmouseover = function () 40 { 41 oDiv.className = "hover" 42 }; 43 oDiv.onmouseout = function () 44 { 45 oDiv.className = "" 46 } 47 }; 48 <body> 49 <div id="div1">鼠标移入改变样式，鼠标移出恢复。</div> 50 </body> 51 52 3 记住密码提示框 53 window.onload = function () 54 { 55 var oTips = document.getElementById("tips"); 56 var oLabel = document.getElementsByTagName("label")[0]; 57 //这种提示功能通过鼠标的划入和划出，来改变预定好样式的显示和隐藏。以达到视觉效果的改变 58 oLabel.onmouseover=function(){ 59 oTips.style.display="block"; 60 }; 61 oLabel.onmouseout=function=function(){ 62 oTips.style.display="none"; 63 } 64 } 65 <div id="outer"> 66 <label><input type="checkbox" />两周内自动登陆</label> 67 <div id="tips">为了您的信息安全，请不要在网吧或公用电脑上使用此功能！</div> 68 </div> 69 70 4 百度输入法 71 window.onload = function () 72 { 73 var oBtn = document.getElementsByTagName("button")[0]; 74 var oIme = document.getElementById("ime"); 75 var oClose = document.getElementById("close"); 76 var style = oIme.style; 77 oBtn.onclick=function(){ 78 //先执行判断再赋值，点击时若显示则隐藏，若隐藏则显示。这个?判断起到了切换的作用，保证效果不中断 79 style.display=style.display=="block"?"none":"block"; 80 }; 81 oBtn.onclick=function(){ 82 style.display="none"; 83 } 84 } 85 <body> 86 <div id="outer"> 87 <button>输入法</button> 88 <ul id="ime"> 89 <li><a href="javascript:;">手写</a></li> 90 <li><a href="javascript:;">拼音</a></li> 91 <li id="close"><a href="javascript:;">关闭</a></li> 92 </ul> 93 </div> 94 </body>
