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


Posted in Javascript onDecember 12, 2019

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

效果图 

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 相关文章推荐
jQuery 入门讲解1
Apr 15 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
动态加载js文件简单示例
Apr 21 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
vue-property-decorator用法详解
Dec 12 #Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 #Javascript
JavaScript Reflect Metadata实现详解
Dec 12 #Javascript
JS动态显示倒计时效果
Dec 12 #Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 #Javascript
js实现倒计时秒杀效果
Mar 25 #Javascript
vue el-table实现自定义表头
Dec 11 #Javascript
You might like
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
让Firefox支持event对象实现代码
2009/11/07 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
js实现左右轮播图
2020/01/09 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
python 切片和range()用法说明
2013/03/24 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
对python中的argv和argc使用详解
2018/12/15 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
《画风》教学反思
2014/04/16 职场文书
国庆节标语大全
2014/10/08 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
投资合作意向书范本
2015/05/08 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
Tomcat弱口令复现及利用
2022/05/06 Servers