JS定時器用法分析【時鐘與菜單中的應用】

更新時間：2016年12月21日 09:57:02 作者：鬼畜十三

這篇文章主要介紹了JS定時器用法,結(jié)合時鐘與菜單中的應用分析了JS中setInterval與setTimeout操作時間的相關技巧,需要的朋友可以參考下

本文實例分析了JS定時器用法。分享給大家供大家參考，具體如下：

開啟定時器：

setInterval 間隔型 //一旦啟動就不會停，重復執(zhí)行
setTimeout 延遲型 //只執(zhí)行一次

停止定時器：

clearInterval
clearTimeout

關閉定時器如果只是clearInterval()那會關掉所有的定時器，有時我們只需要關掉一個而已，所以要定義一個變量來存放定時器

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

例子1

時刻變化的時鐘，且數(shù)字是由圖片代替的

思路：

1.創(chuàng)建Date（日期）對象，獲取系統(tǒng)時間（注:獲取時間如果是一位數(shù)，需要一個轉(zhuǎn)換成二位數(shù)的函數(shù)）

2.將獲得的系統(tǒng)時間每一位數(shù)字賦給圖片地址的數(shù)字編號（charAt()方法，返回字符串指定位置的字符，所以需要一個for循環(huán)返回時分秒六位數(shù)字）

3.需要一個定時器讓它自動更新時間

function toDouble(num){ //一位數(shù)轉(zhuǎn)換成二位數(shù)
  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); //定時器里面應該放的是方法，而不是直接執(zhí)行函數(shù)
  updatetime(); //不執(zhí)行下函數(shù)，會出現(xiàn)剛刷新頁面第一秒，時間是00時00分00秒
}

例子2

二級菜單

一級菜單和二級菜單間有縫隙，如果僅僅是移入一級菜單時二級顯示，移除時隱藏，那么移到縫隙間還是會顯示不出來(或者說來不及進入二級菜單，二級菜單就沒了)，所以需要一個定時器，在離開一級菜單時，不讓二級馬上消失，而是緩慢隱藏，然后在進入二級菜單時，清除這個定時器，他就不會消失了,另外離開二級菜單時，還是要讓它消失，不然會永遠存在

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);
  };
};

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: