溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript定時器設(shè)置、使用與倒計(jì)時案例詳解

發(fā)布時間：2020-09-15 00:41:58 來源：腳本之家 閱讀：257 作者：webbc 欄目：web開發(fā)

本文實(shí)例講述了JavaScript定時器設(shè)置、使用與倒計(jì)時案例。分享給大家供大家參考，具體如下：

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、倒計(jì)時案例

在頁面上有一個按鈕，顯示的是倒計(jì)時的數(shù)字，每隔一秒修改數(shù)字，等到0秒時，就切換爆炸圖片。

效果圖

JavaScript定時器設(shè)置、使用與倒計(jì)時案例詳解
JavaScript定時器設(shè)置、使用與倒計(jì)時案例詳解

代碼

<!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>
  <h2>炸彈效果</h2>
  <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)前倒計(jì)時的數(shù)字，然后進(jìn)行減1操作，最后又賦值到按鈕中，當(dāng)數(shù)字小于或等于0秒時，就切換爆炸圖片已達(dá)到爆炸效果，此時不要忘記取消定時器了。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript時間與日期操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手