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>

猜你喜欢

转载自blog.51cto.com/13517854/2311819