JavaScript是一門非常容易上手的腳本語言，而且工具繁多，功能強(qiáng)大，因?yàn)橐恢弊龊蠖说年P(guān)系，筆者目前也只是略學(xué)一點(diǎn)皮毛。

接下來進(jìn)入正題——計(jì)時(shí)器。先談下計(jì)時(shí)器的功能:

1.計(jì)時(shí)器要能夠在頁面上顯示時(shí)間

2.每秒鐘計(jì)時(shí)器刷新，秒每滿60進(jìn)分鐘1，分鐘每滿60進(jìn)小時(shí)1

3.計(jì)時(shí)器需要能夠重置，也就是重新計(jì)時(shí)

4.計(jì)時(shí)結(jié)束時(shí)，需要能夠有獲取計(jì)時(shí)時(shí)間的方法

以上功能很簡(jiǎn)單，計(jì)時(shí)還應(yīng)該有暫停、繼續(xù)計(jì)時(shí)等功能，沒關(guān)系，我們一個(gè)一個(gè)來。

第一步：

我們做一個(gè)簡(jiǎn)單的頁面，要有一個(gè)現(xiàn)實(shí)時(shí)間的標(biāo)簽，要有開始、暫停倆按鈕，頁面繪制如下：

不要為一個(gè)頁面花太多時(shí)間哦，這只是幫助你寫寫第一段代碼練練手~

 第二步：

我們分析下計(jì)時(shí)器需要哪些屬性：

1.計(jì)時(shí)，需要開始時(shí)間

2.結(jié)束時(shí)間

3.總共走了多長(zhǎng)時(shí)間，這個(gè)屬性是要返回給使用者的

4.展示器，其實(shí)就是個(gè)jquery對(duì)象或者dom對(duì)象啦，計(jì)時(shí)是要在一個(gè)地方展示的嘛

5.展示時(shí)間需要進(jìn)行拆解，于是我們有小時(shí)屬性

6.分鐘屬性

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

我們看下代碼：

    var startTime;//開始時(shí)間
    var endTime;//結(jié)束時(shí)間
    var timeLength;//總時(shí)長(zhǎng)
    var timeSpan;//計(jì)時(shí)器走過的時(shí)間
    var displayer;//時(shí)間顯示器
    var hh=0;//小時(shí)
    var mm=0;//分鐘
    var status=0;//計(jì)時(shí)狀態(tài)  

乍一看好像多了幾個(gè)屬性，因?yàn)橛?jì)時(shí)會(huì)用到JavaScript的setTimeout方法，該方法會(huì)返回一個(gè)對(duì)象，我們可以利用此對(duì)象將setTimeout清除（clearTimeout）;

 第三步：

我們分析下計(jì)時(shí)器需要哪些方法：

1.計(jì)時(shí)器需要啟動(dòng)，于是我們有開始方法

2.計(jì)時(shí)器需要停止，于是我們有停止方法，停止后應(yīng)該告訴使用者計(jì)了多長(zhǎng)時(shí)間，于是應(yīng)該返回時(shí)長(zhǎng)

3.計(jì)時(shí)器還應(yīng)該有個(gè)暫停功能，暫停后，可以在暫停的位置上再次開始計(jì)時(shí)，暫停也應(yīng)該返回時(shí)長(zhǎng)

4.圍繞啟動(dòng)停止，還應(yīng)該有每秒鐘計(jì)時(shí)器的內(nèi)心活動(dòng)，類似一個(gè)委托方法，美秒執(zhí)行一次

5.呈現(xiàn)邏輯，我們要講真正的時(shí)間顯示給頁面上的展示器，并且做一些可讀性更好的格式轉(zhuǎn)換

 上代碼，構(gòu)造函數(shù)：

function createTimer(_startTime,_endTime,_timeLength,_displayer){
      startTime=_startTime;//開始時(shí)間
      endTime=_endTime;//結(jié)束時(shí)間
      timeLength=_timeLength;//總時(shí)長(zhǎng)
      displayer=_displayer;//時(shí)間顯示器
      hh=0;//小時(shí)
      mm=0;//分鐘
      status=0;//計(jì)時(shí)狀態(tài)
    }  

計(jì)時(shí)器開始：

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

 計(jì)時(shí)結(jié)束：

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

每秒鐘計(jì)時(shí)器的內(nèi)心活動(dòng)：

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

為了能夠展現(xiàn)上圖的00:00:00,我們需要一段呈現(xiàn)邏輯

  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;
    } 

我們啟動(dòng)計(jì)時(shí)器，這個(gè)簡(jiǎn)單的計(jì)時(shí)器就開始跑了^_^

是不是少了點(diǎn)什么：計(jì)時(shí)器哪能沒有暫停呀，筆者那會(huì)構(gòu)思這些的時(shí)候，也沒想到暫停功能，正看著它一秒一秒跳動(dòng)著，傻樂呢，直到業(yè)務(wù)需要，才想起來，得加上這功能。

沒關(guān)系，我們繼續(xù)設(shè)計(jì)，demo頁上添加一個(gè)暫停按鈕:P

先分析下：

1.暫停后，肯定要在上次暫停的節(jié)點(diǎn)上重新開始，這塊功能我們做在開始按鈕里，于是我們需要一個(gè)標(biāo)識(shí)位，來判斷是重新開始，還是暫停后開始

2.我們需要記錄暫停的時(shí)間點(diǎn)

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

于是我們添加三個(gè)屬性：

  var isParse=false;//是否為暫停
    var parseTime;//暫停時(shí)間點(diǎn)
    var intervalTime = 0;//暫停時(shí)間間隔

暫停方法：

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

重寫開始方法和呈現(xiàn)方法：

    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);
    }  

以上，搞定，我們的計(jì)時(shí)器擁有了暫停功能~

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

 寫到這里，主要工作就做完啦，其實(shí)還可以進(jìn)行封裝，利用prototype，將方法全部附到一個(gè)對(duì)象里，當(dāng)實(shí)例化一個(gè)timer對(duì)象并初始化一些關(guān)鍵屬性后，這些方法都可以被對(duì)象調(diào)用。這里就不贅述了，感興趣的童鞋可以試試~

最新評(píng)論