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