原文:一些有用的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>
时间： 2024-08-31 15:18:23