JS定时器用法分析【时钟与菜单中的应用】

var timer=null;
btn1.onclick=function(){
  timer=setInterval(函数名,1000);
};
btn2.onclick=function(){
  clearInterval(timer);
};

function toDouble(num){ //一位数转换成二位数
  if(num<10){
    return '0'+num;
  }else{
    return ''+num;
  }
}
window.onload=function(){
  var oimg=document.getElementsByTagName('img');
  var i;
  function updatetime(){
    var odate=new Date();
    var str=toDouble(odate.getHours())+toDouble(odate.getMinutes())+toDouble(odate.getSeconds());
    for(i=0;i<oimg.length;i++){
      oimg[i].src='images/'+str.charAt(i)+'.png';
    }
  }
  setInterval(updatetime,1000); //定时器里面应该放的是方法，而不是直接执行函数
  updatetime(); //不执行下函数，会出现刚刷新页面第一秒，时间是00时00分00秒
}

window.onload=function(){
  var box1=document.getElementById('box1');
  var box2=document.getElementById('box2');
  var timer=null;
  box1.onmouseover=function(){
    box2.style.display="block";
    clearTimeout(timer);  //不清除定时器，离开二级菜单进入一级菜单时，二级菜单也会隐藏
  };
  box1.onmouseout=function(){
    timer=setTimeout(function(){
      box2.style.display="none";
    },300);
  };
  box2.onmouseover=function(){
    clearTimeout(timer);
  };
  box2.onmouseout=function(){  //如果离开二级菜单，让他瞬间消失，IE7下移动到一级菜单时，二级菜单会闪烁
    timer=setTimeout(function(){
      box2.style.display="none";
    },300);
  };
};

window.onload=function(){
  var box1=document.getElementById('box1');
  var box2=document.getElementById('box2');
  var timer=null;
  box1.onmouseover=box2.onmouseover=function show(){
    box2.style.display="block";
    clearTimeout(timer);
  };
  box1.onmouseout=box2.onmouseout=function hide(){
    timer=setTimeout(function(){
      box2.style.display="none";
    },300);
  };
};