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

原文: 一些有用的javascript实例分析(三)

  1 10 输入两个数字，比较大小

  2 window.onload = function ()

  3 {

  4     var aInput = document.getElementsByTagName("input");

  5     var aSpan = document.getElementsByTagName("span")[0];

  6     for(var i=0;i<aInput.length-1;i++){

  7         aInput[i].onkeyup=function(){

  8             //用空白取代非数字

  9             this.value=this.value.replace(/^\d/,"");

 10         }

 11     aInput[2].onclick=function(){

 12         //若都不输入数字提醒（保证代码的健壮性）

 13         (aInput[0]==""||aInput[1]=="")?alert("please input number"):aSpan.innerHTML=Math.max(aInput[0].value,aInput[1].value)

 14     }    

 15     }

 16 11 简易网页时钟

 17 window.onload = function ()

 18 {

 19     var oClock = document.getElementById("clock");    

 20     var aSpan = oClock.getElementsByTagName("span");

 21     setInterval(getTimes,1000);

 22     function getTimes(){

 23         //获取当期时间

 24         var date=new Date();

 25         //时分秒组成一个数组

 26         var aDate=[date.getHours(),date.getMinutes(),date.getSeconds()];

 27         for(var i in aDate){aSpan[i].innerHTML=formate(aDate[i])}

 28     }

 29 function formate(a){

 30     //正则匹配的反向引用，a是数字以默认的10进制输出

 31     return a.toString().replace(/^(\d)$/,"0$1")

 32 

 33 }

 34 12 setTimeout应用

 35 window.onload = function ()

 36 {

 37     var oNav = get.byId("nav");

 38     //获取一级导航栏

 39     var aLi = get.byTagName("li", oNav);

 40     //获取二级导航栏

 41     var aSubNav = get.byClass("subnav", oNav);

 42     var oSubNav = oEm = timer = null;

 43     var i = 0;

 44     //循环一级导航栏

 45     for(i=1;i<aLi.length;i++){

 46         aLi[i].onmouseover=function{

 47             //先隐藏所有的子导航栏

 48             for(i=0;i<aSubNav.length;i++){aSubNav[i].style.display="none";}

 49             //获取该项下的子导航栏

 50             oSubNav=get.byClass("subnav",this)[0];

 51             //获取该项下的指示箭头

 52             oEm=get.byTagName("em",this)[0];

 53             //显示该项下的子导航栏

 54             oSubNav.style.display="block";

 55             //offsetWidth是指对象自身的宽度，整型，单位像素（含边线，如滚动条的占用的宽，值会随着内容的输入而不断改变）

 56             //offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

 57             //判断显示区域,this.offsetLeft是相对oNav来说的

 58             oNav.offestWidth-this.offsetLeft>oSubNav.offestWidth?oSubNav.style.left=this.offest+"px":oSubNav.style.right=0;

 59             //style.left，元素必须设置position才有效

 60             oEm.style.left=this.offsetLeft-oSubNav.offsetLeft+50+"px";

 61             clearTimeout(timer);

 62             //阻止事件冒泡，只在li上有用，在nav没用

 63             oSubNav.onmouseout=function(event){

 64                 (event||window.event).cancelBubble=true;

 65                 //清楚鼠标离开的定时器，做到无缝滑动

 66                 clearTimeout(timer);

 67             }

 68         }

 69         aLi[i].onmouseout=function(){

 70             //离开后0.3s去除子导航栏

 71             timer=setTimeout(function(){oSubNav.style.display="none"},300)

 72         }

 73         }

 74     }

 75 13 自动播放效果-幻灯片

 76 window.onload = function ()

 77 {

 78     var oBox = document.getElementById("box");

 79     var aUl = document.getElementsByTagName("ul");

 80     //获取图片列表

 81     var aImg = aUl[0].getElementsByTagName("li");

 82     //获取按钮列表

 83     var aNum = aUl[1].getElementsByTagName("li");

 84     var timer = play = null;

 85     var i = index = 0;    

 86     //切换按钮

 87     for(i=0;i<aNum.length;i++){

 88         aNum[i].index=i;

 89         aNum[i].onmouseover=function(){

 90             show(this.index);

 91         }

 92     }

 93     //鼠标滑过关闭定时器

 94     oBox.onmouseover=function(){

 95         clearInterval(play);

 96     }

 97     //鼠标离开启动自动播放

 98     oBox.onmouseout=function(){

 99         autoPlay();

100     }

101     //自动播放

102     function autoPlay(){

103         play=setInterval(function(){

104             //图片索引每两秒增加一次

105             index++;

106             //当大于图片数目时，归零。达到无缝滚动

107             index>=aImg.length&&(index=0)

108             show(index);

109         },2000)

110     }

111     autoPlay();

112   //图片切换，淡入淡出

113     function show(a){

114         index=a;

115         var alpha=0;

116         for(var i=0;i<aNum.length;i++){

117             //按钮样式

118             aNum[i].className="";}

119             aNum[index].className="current";

120             clearInterval(timer);

121             for(var i=0;i<aImg.length;i++){

122                 //其他图片的透明度最高，即不显示

123                 aImg[i].style.opacity = 0;//w3c

124                 aImg[i].style.filter = "alpha(opacity=0)";//ie

125             }

126             timer=setInterval(function(){

127                 alpha+=2//0.02秒加2

128                 //若大于100，取100

129                 alpha>100&&(alpha=100);

130                 aImg[index].style.opacity = alpha / 100;

131                 aImg[index].style.filter = "alpha(opacity = " + alpha + ")";

132                 //当达到100，清楚定时器

133                 alpha == 100 && clearInterval(timer)

134             },20)

135 

136         }

137     }

 

 1 14 拖拽

 2 var zIndex = 1;

 3 window.onload = function ()

 4 {

 5     var oDrag1 = document.getElementById("drag1");

 6     var oDrag2 = document.getElementById("drag2");

 7     drag(oDrag1);

 8     drag(oDrag2);

 9 };    

10 function drag(oDrag){

11     var disX=disY=0;

12     oDrag.onmusedown=function(event){

13         var event=event||window.event;

14         disX=event.clientX-this.offsetLeft;

15         disY=event.clientY-this.offestTop;

16         var oTemp=document.createElement("div");

17         oTemp["id"]="temp";

18         oTemp.style.left=this.currentStyle?this.currentStyle["left"]:getComputeStyle(this,null)["left"];

19         oTemp.style.top = this.currentStyle ? this.currentStyle["top"] : getComputedStyle(this, null)["top"];

20         oTemp.style.zIndex=zIndex++;

21         document.body.appendChild(oTemp);

22         document.onmouseover=function(event){

23             var event = event || window.event;

24             var il=event.clientY-disX;

25             var iT=event.clientY-disY;

26             var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;

27             var maxT = document.documentElement.clientHeight - oDrag.offsetHeight

28             iL <= 0 && (iL = 0);

29             iT <= 0 && (iT = 0);

30             iL >= maxL && (iL = maxL);

31             iT >= maxT && (iT = maxT);

32             oTemp.style.left=iL+"px";

33             oTemp.style.top=iT+"px";

34             return false;

35         };

36         document.onmouseup = function ()

37         {

38             document.onmousemove = null;

39             document.onmouseup = null;

40             oDrag.style.left = oTemp.style.left;

41             oDrag.style.top = oTemp.style.top;

42             oDrag.style.zIndex = oTemp.style.zIndex;

43             document.body.removeChild(oTemp);

44             oDrag.releaseCapture && oDrag.releaseCapture()

45         };

46         

47         this.setCapture && this.setCapture();        

48         return false

49     }

50 }