一些有用的javascript实例分析(一)

浏览数：20 / 时间：2015年06月08日

本文以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>