一些有用的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 }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。