秒杀倒计时效果
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>