使用angular $interval服务实现购物网站秒杀活动时间倒计时

最近在做一个购物网站的秒杀活动,其中涉及到了一个时间的倒计时.

所谓“秒杀”,就是网络卖家发布一些超低价格的商品,所有买家在同一时间网上抢购的一种销售方式。通俗一点讲就是网络商家为促销等目的组织的网上限时抢购活动。由于商品价格低廉,往往一上架就被抢购一空,有时只用一秒钟。

秒杀商品通常有两种限制:库存限制、时间限制。

 数据库字段

​​

这个功能我们使用的技术是angular $interval服务在前端实现的

代码:

     //查询正在参与秒杀的商品

     $scope.findOne=function () {
        var id= $location.search()['id'];
         seckillGoodsService.findOneFromRedis(id).success(function (response) {

             $scope.entity=response;

             //计算当前时间到结束时间的总秒数
             secondAll=Math.floor((new Date(response.endTime).getTime()-new Date().getTime())/1000);
             timer= $interval(function () {
                 secondAll=secondAll-1;

                 if (secondAll==0){
                     $interval.cancel(timer)
                     alert("秒杀活动已结束!")
                 }else {
                     $scope.timeString=convertTimeString(secondAll);
                 }
             },1000);
         });
     }

     ////把秒转换为 天小时分钟秒格式  XXX天 10:22:33
     convertTimeString=function (secondAll) {
         var days=Math.floor(secondAll/(60*60*24));//天数
         var hours=Math.floor((secondAll-days*60*60*24)/(60*60));//小时数
         var minutes=Math.floor((secondAll-days*60*60*24-hours*60*60)/60);//分钟
         var seconds=secondAll-days*60*60*24-hours*60*60-minutes*60;//秒
         var timeString="";
         if (days>0){
            timeString=days+"天"
         }
         return timeString+hours+":"+minutes+":"+seconds
     }

页面引用

 

 最终的效果如图:

猜你喜欢

转载自blog.csdn.net/luo609630199/article/details/82802200