本文實例分析了JS定時器用法。分享給大家供大家參考，具體如下：
開啟定時器：
setInterval 間隔型 //一旦啟動就不會停，重復執行
setTimeout 延遲型 //只執行一次
停止定時器：
clearInterval
clearTimeout
關閉定時器如果只是clearInterval()那會關掉所有的定時器，有時我們只需要關掉一個而已，所以要定義一個變量來存放定時器
var timer=null;btn1.onclick=function(){ timer=setInterval(函數名,1000);};btn2.onclick=function(){ clearInterval(timer);};例子1
時刻變化的時鐘，且數字是由圖片代替的
思路：
1.創建Date（日期）對象，獲取系統時間（注:獲取時間如果是一位數，需要一個轉換成二位數的函數）
2.將獲得的系統時間每一位數字賦給圖片地址的數字編號（charAt()方法，返回字符串指定位置的字符，所以需要一個for循環返回時分秒六位數字）
3.需要一個定時器讓它自動更新時間
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秒}例子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相關內容感興趣的讀者可查看本站專題：《JavaScript時間與日期操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
