Java之品優購課程講義_day19(5)
阿新 • • 發佈:2018-12-18
秒殺倒計時效果 3.3.1 $interval 服務簡介 在 AngularJS 中$interval 服務用來處理間歇性處理一些事情 格式為: $interval(執行的函式,間隔的毫秒數,執行次數); 執行次數可以預設,如果預設則無限迴圈執行 取消執行用 cancel 方法
$interval.cancel(time);
我先現在先做一個簡單的例子:10 秒倒計時 ,首先引入$interval , 控制層編寫程式碼如下:
$scope.second = 10; time= $interval(function(){ if($scope.second>0){ $scope.second =$scope.second-1; }else{ $interval.cancel(time); alert("秒殺服務已結束"); } },1000); 頁面用表示式顯示$scope.second 的值 3.3.2 秒殺倒計時 修改 seckillGoodsController.js ,實現 $scope.findOne=function(){ $scope.findOne=function(){ seckillGoodsService.findOne($location.search()['id']).success( function(response){ $scope.entity= response; allsecond =Math.floor( ( new Date($scope.entity.endTime).getTime()- (new Date().getTime())) /1000); //總秒數 time= $interval(function(){ if(second>0){ second =second-1; $scope.timeString=convertTimeString(allsecond);//轉換時間字串 }else{ $interval.cancel(time); alert("秒殺服務已結束"); } },1000); } ); } //轉換秒為 天小時分鐘秒格式 XXX 天 10:22:33 convertTimeString=function(allsecond){ var days= Math.floor( allsecond/(60*60*24));//天數 var hours= Math.floor( (allsecond-days*60*60*24)/(60*60) );//小數數 var minutes= Math.floor( (allsecond -days*60*60*24 - hours*60*60)/60 );// 分鐘數 var seconds= allsecond -days*60*60*24 - hours*60*60 -minutes*60; //秒數 var timeString=""; if(days>0){ timeString=days+"天 "; } return timeString+hours+":"+minutes+":"+seconds; } 修改頁面 seckill-item.html ,顯示 time 的值 <span class="overtime"> 距離結束:{{timeString}}</span>