网上商城开发限时抢购的倒计时是怎么实现的

查看演示

网上商城开发限时抢购的倒计时是怎么实现的

技术干货· 2021-03-26 阅读:59

网上商城开发的时候，会用到很多新颖的效果，今天安菲云跟您一起探讨一下多用户商城系统的限时抢购倒计时是怎么实现的。

安菲云用安菲多用户商城系统为例，讲解一下限时抢购的倒计时效果。

安菲多用户商城系统倒计时根据后台设置好的时段与当前时间来计算，然后通过定时器来执行代码形成倒计时效果。

网上商城开发倒计时

在显示倒计时的页面调用WST.countDown函数。

代码段：

WST.countDown = function(opts){
   var itvTime = (opts.countDownType==1)?100:1000;
   var f = {
      zero: function(n){
         var n = parseInt(n, 10);
         if(n > 0){
            if(n <= 9){
               n = "0" + n;
            }
            return String(n);
         }else{
            return "0";
         }
      },
      count: function(){
         if(opts.nowTime){
            var d = new Date();
            d.setTime(opts.nowTime.getTime()+itvTime);
            opts.nowTime = d;
            d = null;
         }else{
            opts.nowTime = new Date();
         }
         //现在将来秒差值
         var dur = 0;
         var pms = {
            msec: "0",
            sec: "0",
            mini: "0",
            hour: "0",
            day: "0"
         };
         var dur = Math.round((opts.endTime.getTime() - opts.nowTime.getTime()));
         if(dur >= 0){
            pms.msec = Math.floor(dur / 100 % 10);
            pms.sec = Math.floor((dur /1000 % 60)) > 0? f.zero(dur / 1000 % 60) : "00";
            pms.mini = Math.floor((dur / 60000)) > 0? f.zero(Math.floor((dur / 60000)) % 60) : "00";
            pms.hour = Math.floor((dur / 3600000)) > 0? f.zero(Math.floor((dur / 3600000)) % 24) : "00";
            pms.day = Math.floor((dur / 86400000)) > 0? f.zero(Math.floor(dur / 86400000)) : "00";
         }
         pms.last = dur;
         pms.nowTime = opts.nowTime;
         opts.callback(pms);
         if(pms.last<=0)clearInterval(itv);
      }
   };
   var itv = setInterval(f.count, itvTime);
   return itv;
};