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

原文: 一些有用的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>

 

你可能感兴趣的:(JavaScript)