javascript計時器編寫過程與實現方法，javascript計時器

javascript計時器編寫過程與實現方法，javascript計時器

JavaScript是一門非常容易上手的指令碼語言，而且工具繁多，功能強大，因為一直做後端的關係，筆者目前也只是略學一點皮毛。

接下來進入正題——計時器。先談下計時器的功能:

1.計時器要能夠在頁面上顯示時間

2.每秒鐘計時器重新整理，秒每滿60進分鐘1，分鐘每滿60進小時1

3.計時器需要能夠重設，也就是重新計時

4.計時結束時，需要能夠有擷取計時時間的方法

以上功能很簡單，計時還應該有暫停、繼續計時等功能，沒關係，我們一個一個來。

第一步：

我們做一個簡單的頁面，要有一個現即時間的標籤，要有開始、暫停倆按鈕，頁面繪製如下：

不要為一個頁面花太多時間哦，這隻是協助你寫寫第一段代碼練練手~

 第二步：

我們分析下計時器需要哪些屬性：

1.計時，需要開始時間

2.結束時間

3.總共走了多長時間，這個屬性是要返回給使用者的

4.展示器，其實就是個jquery對象或者dom對象啦，計時是要在一個地方展示的嘛

5.展示時間需要進行拆解，於是我們有小時屬性

6.分鐘屬性

7.秒屬性（其實被總時間囊括了，先記上，萬一用得到呢）

我們看下代碼：

    var startTime;//開始時間    var endTime;//結束時間    var timeLength;//總時間長度    var timeSpan;//計時器走過的時間    var displayer;//時間顯示器    var hh=0;//小時    var mm=0;//分鐘    var status=0;//計時狀態  

乍一看好像多了幾個屬性，因為計時會用到JavaScript的setTimeout方法，該方法會返回一個對象，我們可以利用此對象將setTimeout清除（clearTimeout）;

 第三步：

我們分析下計時器需要哪些方法：

1.計時器需要啟動，於是我們有開始方法

2.計時器需要停止，於是我們有停止方法，停止後應該告訴使用者計了多長時間，於是應該返回時間長度

3.計時器還應該有個暫停功能，暫停後，可以在暫停位置上再次開始計時，暫停也應該返回時間長度

4.圍繞啟動停止，還應該有每秒鐘計時器的內心活動，類似一個委託方法，美秒執行一次

5.呈現邏輯，我們要講真正的時間顯示給頁面上的展示器，並且做一些可讀性更好的格式轉換

 上代碼，建構函式：

function createTimer(_startTime,_endTime,_timeLength,_displayer){      startTime=_startTime;//開始時間      endTime=_endTime;//結束時間      timeLength=_timeLength;//總時間長度      displayer=_displayer;//時間顯示器      hh=0;//小時      mm=0;//分鐘      status=0;//計時狀態    }  

計時器開始：

    var start =function(){      hh = 0;      mm = 0;      startTime=new Date();      status = setTimeout(beat, 1000);    } 

 計時結束：

    var stop=function(){      clearTimeout(status);      endTime=new Date();      timeLength=parseInt((endTime-startTime)/1000);      alert(timeLength);    }

每秒鐘計時器的內心活動：

     var beat=function(){      endTime = new Date();      timeSpan = parseInt((endTime - startTime)/1000);      displayer[0].innerHTML = checkTime(timeSpan);      status = setTimeout(beat, 1000);    }

為了能夠展現的00:00:00,我們需要一段呈現邏輯

  var checkTime=function(len){      len=len-mm*60;      if (len >= 60) {        this.mm++;        //starttime1 = new Date();        len = 0;      }      mm=mm-hh*60;      if (mm >= 60) {        hh++;        mm = 0;      }      return j(self.hh) + ":" +j(mm) + ":" + j(len);    }      var j=function(arg){      return arg >= 10 ? arg : "0" + arg;    } 

我們啟動計時器，這個簡單的計時器就開始跑了^_^

是不是少了點什麼：計時器哪能沒有暫停呀，筆者那會構思這些的時候，也沒想到暫停功能，正看著它一秒一秒跳動著，傻樂呢，直到業務需要，才想起來，得加上這功能。

沒關係，我們繼續設計，demo頁上添加一個暫停按鈕:P

先分析下：

1.暫停後，肯定要在上次暫停節點上重新開始，這塊功能我們做在開始按鈕裡，於是我們需要一個標識位，來判斷是重新開始，還是暫停後開始

2.我們需要記錄暫停時間點

3.暫停時間間隔最好也能記下來，能用得到，不然再次開始的時候，時間在呈現上會立刻跳到間隔之後（比如暫停時是00:00:09，暫停一分鐘後，如果不作調整直接開始，時間會變成00:01:09）

於是我們添加三個屬性：

  var isParse=false;//是否為暫停    var parseTime;//暫停時間點    var intervalTime = 0;//暫停時間間隔

暫停方法：

   var parse=function(){      parseTime = new Date();      isParse = true;      clearTimeout(status);    }  

重寫開始方法和呈現方法：

    var start =function(){      if(!isParse){        startTime=new Date();        startTime1=startTime;        hh = 0;        mm = 0;        startTime=new Date();        status = setTimeout(beat, 1000);      }      else{        intervalTime=parseInt((intervalTime + (new Date() - parseTime) / 1000));                starttime1 = startTime;        status = setTimeout(beat, 1000);      }    }    var checkTime=function(len){      len=len-mm*60-intervalTime;      if (len >= 60) {        mm++;        len = 0;      }            mm=mm-hh*60;      if (mm >= 60) {        hh++;        mm = 0;      }      return j(hh) + ":" +j(mm) + ":" + j(len);    }  

以上，搞定，我們的計時器擁有了暫停功能~

 

看下代碼全覽，核心代碼不到一百行。

 寫到這裡，主要工作就做完啦，其實還可以進行封裝，利用prototype，將方法全部附到一個對象裡，當執行個體化一個timer對象並初始化一些關鍵屬性後，這些方法都可以被對象調用。這裡就不贅述了，感興趣的童鞋可以試試~

您可能感興趣的文章:

• VB倒計時器和JS目前時間
• JS 頁面計時器範例程式碼
• javascript計時器事件使用詳解
• Node.js中使用計時器定時執行函數詳解
• JavaScript分秒倒計時器實現方法
• JavaScript計時器樣本分析
• javascript計時器詳解
• javascript實現的簡單計時器
• javascript設計簡單的秒錶計時器