js实现商城秒杀倒计时功能（动态设置秒杀时间）

绝地灬酷狼 2022-03-07 20:46 424阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy_size_16_color_FFFFFF_t_70][]

效果图

<!DOCTYPE html>
    <html>
    
      <head>
        <meta charset="UTF-8">
        <title></title>
      </head>
    
      <body>
        <div id="noStart">活动未开始</div>
        <div class="div1" id="startNow" style="display: none;">开始购买</div>
        <div class="div2" id="stopNow" style="display: none;">活动结束</div>
        <div>
          <span class="content"></span>
          <span class="botHours"></span>时
          <span class="botMIn"></span>分
          <span class="botSecond"></span>秒
        </div>
      </body>
    
    </html>
    <script src="js/jquery.min.js"></script>
    <script>
      $(function() {
        fn()
        function fn() {
          var timer = setInterval(function() {
            var start = '2019/03/13 00:00:00';
            var StartTime = new Date(start);
            var NowTime = new Date();
            var day = NowTime.getDate();
            var month = NowTime.getMonth() + 1;
            var year = NowTime.getFullYear();
            var tw = year + '/' + month + '/' + day + ' 09:00:00';
            var ei = year + '/' + month + '/' + day + ' 10:00:00';
            var tw1 = year + '/' + month + '/' + day +' 14:00:00';
            var ei1 = year + '/' + month + '/' + day +' 15:00:00';
            tw = new Date(tw).getTime();
            ei = new Date(ei).getTime();
            tw1 = new Date(tw1).getTime();
            ei1 = new Date(ei1).getTime();
            var EndTime = '';
            if(NowTime < StartTime) {
              EndTime = StartTime;
              $('#stopNow').css('display', 'none');
              $('#startNow').css('display', 'none');
              $('#noStart').css('display', 'block');
              $(".content").html("距离活动开始")
            } else {
              if(NowTime < tw) {
                EndTime = tw;
                $('#stopNow').css('display', 'none');
                $('#startNow').css('display', 'none');
                $('#noStart').css('display', 'block');
                $(".content").html("距离活动开始剩余")
              } else if(NowTime >= tw && NowTime < ei) {
                EndTime = ei;
                $('#stopNow').css('display', 'none');
                $('#startNow').css('display', 'block');
                $('#noStart').css('display', 'none');
                $(".content").html("距离活动结束剩余")
              }else if(NowTime < tw1){
                EndTime =tw1;
                $('#stopNow').css('display', 'none');
                $('#startNow').css('display', 'none');
                $('#noStart').css('display', 'block');
                $(".content").html("距离活动开始剩余")
              } else if(NowTime >= tw1 && NowTime < ei1) {
                EndTime = ei1;
                $('#stopNow').css('display', 'none');
                $('#startNow').css('display', 'block');
                $('#noStart').css('display', 'none');
                $(".content").html("距离活动结束剩余")
              }else if(NowTime >= ei1) {
                EndTime = tw + 24 * 60 * 60 * 1000;
                $('#stopNow').css('display', 'block');
                $('#startNow').css('display', 'none');
                $('#noStart').css('display', 'none');
                $(".content").html("距离活动开始剩余")
              }
            }
            console.log(EndTime)
            var t = EndTime - NowTime;
            if(t < 1000) {
              window.location.reload();
              clearInterval(timer);
              timer = null;
              return false;
            }
            var d = 0;
            var h = 0;
            var m = 0;
            var s = 0;
            if(t >= 0) {
              d = Math.floor((t / 1000 / 3600) / 24);
              h = Math.floor((t / 1000 / 3600) % 24);
              m = Math.floor((t / 1000 / 60) % 60);
              s = Math.floor(t / 1000 % 60);
              if(d < 10) {
                d = "0" + d;
              }
              if(h < 10) {
                h = "0" + h;
              }
              if(m < 10) {
                m = "0" + m;
              }
              if(s < 10) {
                s = "0" + s;
              }
              $('.botHours').html(h);
              $('.botMIn').html(m);
              $('.botSecond').html(s);
            }
          }, 1000)
        }
      });
    
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy_size_16_color_FFFFFF_t_70]: /images/20220308/4807973c60a84e618b39c2ed26813e79.png