本文實例講述了JavaScript定時器設置、使用與倒計時案例。分享給大家供大家參考，具體如下：
1、設置定時器
定時器，適用于定時執行的任務中。在BOM的window對象中，有這樣的兩個函數是用于設置定時器
setTimeout(function,delay);//設置延時多少毫秒執行該函數，只執行一次，返回值是一個idsetInterval(function,delay);//設置間隔多少毫米一直執行該函數，執行多次，返回值是一個id
兩者的區別就在于setTimeout方式只執行一次，而setInterval理論可以執行無數次，直到其被取消。
2、取消定時器
上面說過，在開啟定時器會返回一個id，這個id是用來區別開啟的多個定時器。當我們要取消定時器時，可以使用一下這兩個方法。
clearTimeout(id);//取消由setTimeout方式開啟的定時器clearInterval(id);//取消由setInterval方式開啟的定時器
3、循環調用setTimeout
在使用中，可以用setTimeout方式來實現setInterval的效果，其實這個讓我想起了當初學Android是的Handler機制，發一個延時消息，然后在內容中再發出消息。例如：
<script> var t = 1; function time(){ console.log(t++); window.setTimeout('time()',1000); } window.setTimeout('time()',1000);</script>4、倒計時案例
在頁面上有一個按鈕，顯示的是倒計時的數字，每隔一秒修改數字，等到0秒時，就切換爆炸圖片。
效果圖
代碼
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""></head><body> <h1>炸彈效果</h1> <input type="button" value="5" /><br/> <img src="warn.jpg"/></body><script> //定時執行 function time(){ var input = document.getElementsByTagName('input')[0];//獲取按鈕中的數字 var time = parseInt(input.value) - 1; input.value = time; //爆炸操作 if(time <= 0){ var img = document.getElementsByTagName('img')[0]; img.src = 'boom.jpg';//切換爆照圖片 clearInterval(t1);//清除定時器 } } var t1 = window.setInterval('time()',1000);//開啟定時器</script></html>思路
其實這個例子挺簡單的，首先以每隔1秒開啟定時器，在定時執行函數中每次獲取當前倒計時的數字，然后進行減1操作，最后又賦值到按鈕中，當數字小于或等于0秒時，就切換爆炸圖片已達到爆炸效果，此時不要忘記取消定時器了。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript時間與日期操作技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
