1. 程式人生 > >angular-timer 單個頁面設定多個倒計時

angular-timer 單個頁面設定多個倒計時

最近專案中要做個一元搶購倒計時功能,一個頁面有多個倒計時。很是頭疼,還好找到angular-timer外掛,頓時輕鬆許多。做完順便做下記錄:

1.外掛地址 https://github.com/siddii/angular-timer

    在index中引入以下幾個檔案,並在app.js中注入timer

  • lib/momentjs/min/moment.min.js
  • lib/momentjs/min/locales.min.js
  • lib/humanize-duration/humanize-duration.js
  • angular.module('starter', ['timer'])
2.html

<timer ng-if="item.yi_id!=end_id" end-time="item.status_time | ten" interval="1000" finish-callback="finished(item.yi_id)">
         {{minutes || '00'}}:{{seconds || '00'}}

<timer interval="10"> .{{millis | limitTo:-3 | limitTo:2}}</timer>
</timer>

item.status_time是參與人數滿了的時間 ten是一個加十分鐘的過濾器,順便轉換成時間戳

 .filter('ten', function() {
    return function(value) {
      if (!value) return '';
      //計算時間差
      var date2 = new Date(value).getTime();   
      var fiveDaysMm = 600*1000;  //建立時間 十分鐘
      var date3 = (fiveDaysMm + date2); 
      return new Date(date3).getTime();
    };
})

<timer interval="10"> .{{millis | limitTo:-3 | limitTo:2}}</timer>是單獨做的一個毫秒計時

3.js  倒計時結束觸發finished方法,拉取列表重新整理

 //倒計時結束
  $scope.finished=function(id){
    $scope.getOnePurshaseGoods();
  }