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'])
<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();
}