JS实现商城秒杀倒计时功能(动态设置秒杀时间)

更新时间：2019年12月12日 09:38:23 作者：缘飞梦

这篇文章主要介绍了JS实现商城秒杀倒计时功能（动态设置秒杀时间）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

一年一度的双十二如期而至，今天的你买买买了吗，下面小编给大家分享一个动态秒杀倒计时功能。

效果图

<!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>

总结

以上所述是小编给大家介绍的JS实现商城秒杀倒计时功能(动态设置秒杀时间)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

详解javascript中原始数据类型Null和Undefined
这篇文章主要介绍了javascript中原始数据类型Null和Undefined的相关资料,需要的朋友可以参考下
2015-12-12
JavaScript页面加载事件实例讲解
在本篇文章中我们给大家通过实例讲解一下关于JavaScript页面加载事件的相关知识点内容，有需要的朋友们可以参考下。
2019-09-09
js完美实现@提到好友特效（兼容各大浏览器）
本文给大家分享的是一则使用javascript完美实现兼容各大浏览器的@好友自动提示的特效，是根据百度贴吧的效果模仿来的，推荐给小伙伴们，希望大家能够喜欢。
2015-03-03
JS设置cookie、读取cookie
js设置cookie有很多种方法，包括JS设置cookie、读取cookie，工作中常会用到！下面是详细代码，感兴趣的小伙伴们可以参考一下
2016-02-02
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
这篇文章主要介绍了JS获取日期的方法,结合具体实例分析了javascript计算昨天,今天,明天,前n天,后n天日期及对应的星期几实现技巧,需要的朋友可以参考下
2017-09-09
JavaScript判断是否为数组的各种方法汇总
如何判断一个对象或一个值是否是一个数组,在面试或工作中我们常常会遇到这个问题,既然出现频率高,想着还是做个整理,所以这篇文章主要给大家汇总介绍了关于JavaScript判断是否为数组的各种方法,需要的朋友可以参考下
2021-08-08
图文详解JavaScript的原型对象及原型链
许多人对JavaScript的原型及原型链仍感到困惑，网上的文章又大多长篇大论，令读者不明觉厉。下面小编将用最简洁明了的图文介绍JavaScript的原型及原型链。
2016-08-08
JavaScript修改注册表实例代码
这篇文章主要介绍了JavaScript修改注册表实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-01-01
js的对象与函数详解
今天小编就为大家分享一篇关于js的对象与函数详解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
详解ES6之用let声明变量以及let loop机制
本篇文章主要介绍了详解ES6之用let声明变量以及let loop机制，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07