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

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

 10 输入两个数字，比较大小
 window.onload = function ()
 {
     var aInput = document.getElementsByTagName("input");
     var aSpan = document.getElementsByTagName("span")[0];
     for(var i=0;i<aInput.length-1;i++){
         aInput[i].onkeyup=function(){
             //用空白取代非数字
             this.value=this.value.replace(/^\d/,"");
         }
     aInput[2].onclick=function(){
         //若都不输入数字提醒（保证代码的健壮性）
         (aInput[0]==""||aInput[1]=="")?alert("please input number"):aSpan.innerHTML=Math.max(aInput[0].value,aInput[1].value)
     }
     }
 11 简易网页时钟
 window.onload = function ()
 {
     var oClock = document.getElementById("clock");
     var aSpan = oClock.getElementsByTagName("span");
     setInterval(getTimes,1000);
     function getTimes(){
         //获取当期时间
         var date=new Date();
         //时分秒组成一个数组
         var aDate=[date.getHours(),date.getMinutes(),date.getSeconds()];
         for(var i in aDate){aSpan[i].innerHTML=formate(aDate[i])}
     }
 function formate(a){
     //正则匹配的反向引用，a是数字以默认的10进制输出
     return a.toString().replace(/^(\d)$/,"0$1")

 }
 12 setTimeout应用
 window.onload = function ()
 {
     var oNav = get.byId("nav");
     //获取一级导航栏
     var aLi = get.byTagName("li", oNav);
     //获取二级导航栏
     var aSubNav = get.byClass("subnav", oNav);
     var oSubNav = oEm = timer = null;
     var i = 0;
     //循环一级导航栏
     for(i=1;i<aLi.length;i++){
         aLi[i].onmouseover=function{
             //先隐藏所有的子导航栏
             for(i=0;i<aSubNav.length;i++){aSubNav[i].style.display="none";}
             //获取该项下的子导航栏
             oSubNav=get.byClass("subnav",this)[0];
             //获取该项下的指示箭头
             oEm=get.byTagName("em",this)[0];
             //显示该项下的子导航栏
             oSubNav.style.display="block";
             //offsetWidth是指对象自身的宽度，整型，单位像素（含边线，如滚动条的占用的宽，值会随着内容的输入而不断改变）
             //offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
             //判断显示区域,this.offsetLeft是相对oNav来说的
             oNav.offestWidth-this.offsetLeft>oSubNav.offestWidth?oSubNav.style.left=this.offest+"px":oSubNav.style.right=0;
             //style.left，元素必须设置position才有效
             oEm.style.left=this.offsetLeft-oSubNav.offsetLeft+50+"px";
             clearTimeout(timer);
             //阻止事件冒泡，只在li上有用，在nav没用
             oSubNav.onmouseout=function(event){
                 (event||window.event).cancelBubble=true;
                 //清楚鼠标离开的定时器，做到无缝滑动
                 clearTimeout(timer);
             }
         }
         aLi[i].onmouseout=function(){
             //离开后0.3s去除子导航栏
             timer=setTimeout(function(){oSubNav.style.display="none"},300)
         }
         }
     }
 13 自动播放效果-幻灯片
 window.onload = function ()
 {
     var oBox = document.getElementById("box");
     var aUl = document.getElementsByTagName("ul");
     //获取图片列表
     var aImg = aUl[0].getElementsByTagName("li");
     //获取按钮列表
     var aNum = aUl[1].getElementsByTagName("li");
     var timer = play = null;
     var i = index = 0;
     //切换按钮
     for(i=0;i<aNum.length;i++){
         aNum[i].index=i;
         aNum[i].onmouseover=function(){
             show(this.index);
         }
     }
     //鼠标滑过关闭定时器
     oBox.onmouseover=function(){
         clearInterval(play);
     }
     //鼠标离开启动自动播放
     oBox.onmouseout=function(){
         autoPlay();
     }
     //自动播放
     function autoPlay(){
         play=setInterval(function(){
             //图片索引每两秒增加一次
             index++;
             //当大于图片数目时，归零。达到无缝滚动
             index>=aImg.length&&(index=0)
             show(index);
         },2000)
     }
     autoPlay();
   //图片切换，淡入淡出
     function show(a){
         index=a;
         var alpha=0;
         for(var i=0;i<aNum.length;i++){
             //按钮样式
             aNum[i].className="";}
             aNum[index].className="current";
             clearInterval(timer);
             for(var i=0;i<aImg.length;i++){
                 //其他图片的透明度最高，即不显示
                 aImg[i].style.opacity = 0;//w3c
                 aImg[i].style.filter = "alpha(opacity=0)";//ie
             }
             timer=setInterval(function(){
                 alpha+=2//0.02秒加2
                 //若大于100，取100
                 alpha>100&&(alpha=100);
                 aImg[index].style.opacity = alpha / 100;
                 aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
                 //当达到100，清楚定时器
                 alpha == 100 && clearInterval(timer)
             },20)

         }
     }

 14 拖拽
 var zIndex = 1;
 window.onload = function ()
 {
     var oDrag1 = document.getElementById("drag1");
     var oDrag2 = document.getElementById("drag2");
     drag(oDrag1);
     drag(oDrag2);
 };
 function drag(oDrag){
     var disX=disY=0;
     oDrag.onmusedown=function(event){
         var event=event||window.event;
         disX=event.clientX-this.offsetLeft;
         disY=event.clientY-this.offestTop;
         var oTemp=document.createElement("div");
         oTemp["id"]="temp";
         oTemp.style.left=this.currentStyle?this.currentStyle["left"]:getComputeStyle(this,null)["left"];
         oTemp.style.top = this.currentStyle ? this.currentStyle["top"] : getComputedStyle(this, null)["top"];
         oTemp.style.zIndex=zIndex++;
         document.body.appendChild(oTemp);
         document.onmouseover=function(event){
             var event = event || window.event;
             var il=event.clientY-disX;
             var iT=event.clientY-disY;
             var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
             var maxT = document.documentElement.clientHeight - oDrag.offsetHeight
             iL <= 0 && (iL = 0);
             iT <= 0 && (iT = 0);
             iL >= maxL && (iL = maxL);
             iT >= maxT && (iT = maxT);
             oTemp.style.left=iL+"px";
             oTemp.style.top=iT+"px";
             return false;
         };
         document.onmouseup = function ()
         {
             document.onmousemove = null;
             document.onmouseup = null;
             oDrag.style.left = oTemp.style.left;
             oDrag.style.top = oTemp.style.top;
             oDrag.style.zIndex = oTemp.style.zIndex;
             document.body.removeChild(oTemp);
             oDrag.releaseCapture && oDrag.releaseCapture()
         };

         this.setCapture && this.setCapture();
         return false
     }
 }