黑马程序员技术交流社区

标题: 【郑州校区】Java之品优购课程讲义_day19（5） [打印本页]

---

作者: 谷粒姐姐    时间: 2018-11-1 17:12
标题: 【郑州校区】Java之品优购课程讲义_day19（5）
秒杀倒计时效果
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> 

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2