A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

秒杀倒计时效果
3.3.1 $interval 服务简介
在 AngularJS 中$interval 服务用来处理间歇性处理一些事情
格式为:
$interval(执行的函数,间隔的毫秒数,运行次数);
运行次数可以缺省,如果缺省则无限循环执行   
取消执行用 cancel 方法
[AppleScript] 纯文本查看 复制代码
$interval.cancel(time); 

我先现在先做一个简单的例子:10 秒倒计时  ,首先引入$interval ,  控制层编写代码如下:
[AppleScript] 纯文本查看 复制代码
$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 ,实现
[AppleScript] 纯文本查看 复制代码
$scope.findOne=function(){  

[AppleScript] 纯文本查看 复制代码
$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 的值
[AppleScript] 纯文本查看 复制代码
<span class="overtime"> 距离结束:{{timeString}}</span> 



0 个回复

您需要登录后才可以回帖 登录 | 加入黑马