JS定時(shí)器用法分析【時(shí)鐘與菜單中的應(yīng)用】

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

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

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

開啟定時(shí)器：

setInterval 間隔型 //一旦啟動(dòng)就不會(huì)停，重復(fù)執(zhí)行
setTimeout 延遲型 //只執(zhí)行一次

停止定時(shí)器：

clearInterval
clearTimeout

關(guān)閉定時(shí)器如果只是clearInterval()那會(huì)關(guān)掉所有的定時(shí)器，有時(shí)我們只需要關(guān)掉一個(gè)而已，所以要定義一個(gè)變量來存放定時(shí)器

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

例子1

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

思路：

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

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

3.需要一個(gè)定時(shí)器讓它自動(dòng)更新時(shí)間

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); //定時(shí)器里面應(yīng)該放的是方法，而不是直接執(zhí)行函數(shù)
  updatetime(); //不執(zhí)行下函數(shù)，會(huì)出現(xiàn)剛刷新頁面第一秒，時(shí)間是00時(shí)00分00秒
}

例子2

二級(jí)菜單

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

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);  //不清除定時(shí)器，離開二級(jí)菜單進(jìn)入一級(jí)菜單時(shí)，二級(jí)菜單也會(huì)隱藏
  };
  box1.onmouseout=function(){
    timer=setTimeout(function(){
      box2.style.display="none";
    },300);
  };
  box2.onmouseover=function(){
    clearTimeout(timer);
  };
  box2.onmouseout=function(){  //如果離開二級(jí)菜單，讓他瞬間消失，IE7下移動(dòng)到一級(jí)菜單時(shí)，二級(jí)菜單會(huì)閃爍
    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);
  };
};

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: