你會不會在開發(fā)項目的過程中遇到這樣的問題脾歧，經(jīng)常會有一些計時器或者定時器功能需求具则，還有一些需要倒計時功能，針對以上的問題小猿圈web前端講師分享給大家JavaScript定時器與倒計時案例詳解，希望對于學(xué)習(xí)中的你谁撼，有一定的幫助。
1滋饲、設(shè)置定時器
定時器厉碟，適用于定時執(zhí)行的任務(wù)中。在BOM的window對象中屠缭，有這樣的兩個函數(shù)是用于設(shè)置定時器
setTimeout(function,delay);//設(shè)置延時多少毫秒執(zhí)行該函數(shù)箍鼓，只執(zhí)行一次，返回值是一個id
setInterval(function,delay);//設(shè)置間隔多少毫米一直執(zhí)行該函數(shù)呵曹，執(zhí)行多次款咖，返回值是一個id
兩者的區(qū)別就在于setTimeout方式只執(zhí)行一次，而setInterval理論可以執(zhí)行無數(shù)次奄喂，直到其被取消铐殃。
2、取消定時器
上面說過跨新，在開啟定時器會返回一個id富腊，這個id是用來區(qū)別開啟的多個定時器。當(dāng)我們要取消定時器時域帐，可以使用一下這兩個方法赘被。
clearTimeout(id);//取消由setTimeout方式開啟的定時器
clearInterval(id);//取消由setInterval方式開啟的定時器
3、循環(huán)調(diào)用setTimeout
在使用中肖揣，可以用setTimeout方式來實(shí)現(xiàn)setInterval的效果民假，其實(shí)這個讓我想起了當(dāng)初學(xué)Android是的Handler機(jī)制，發(fā)一個延時消息龙优，然后在內(nèi)容中再發(fā)出消息羊异。例如：
<script>
? var t = 1;
? function time(){
? ? console.log(t++);
? ? window.setTimeout('time()',1000);
? }
? window.setTimeout('time()',1000);
</script>
4、倒計時案例
在頁面上有一個按鈕陋率，顯示的是倒計時的數(shù)字球化，每隔一秒修改數(shù)字，等到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>
? //定時執(zhí)行
? function time(){
? ? var input = document.getElementsByTagName('input')[0];//獲取按鈕中的數(shù)字
? ? 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>
思路
其實(shí)這個例子挺簡單的，首先以每隔1秒開啟定時器菩浙，在定時執(zhí)行函數(shù)中每次獲取當(dāng)前倒計時的數(shù)字巢掺，然后進(jìn)行減1操作句伶，最后又賦值到按鈕中，當(dāng)數(shù)字小于或等于0秒時陆淀，就切換爆炸圖片已達(dá)到爆炸效果考余，此時不要忘記取消定時器了。
經(jīng)過小猿圈web前端老師的介紹相信很多同學(xué)對于JavaScript定時器與倒計時案例詳解有了一定的了解轧苫，不過大家不要忘記點(diǎn)贊楚堤、收藏、轉(zhuǎn)發(fā)呦web前端自學(xué)②群：738735873含懊，讓更多和你一樣有同樣問題的同學(xué)得到幫助身冬，小猿圈為大家提供一個良好的學(xué)習(xí)平臺。
