一些有用的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 }