1. 程式人生 > >Java之品優購課程講義_day19(5)

Java之品優購課程講義_day19(5)

秒殺倒計時效果  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>