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 相关文章推荐
javascript:以前写的xmlhttp池,代码
May 18 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
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
使用无限生命期Session的方法
2006/10/09 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
基于IView中on-change属性的使用详解
2018/03/15 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
Python之读取TXT文件的方法小结
2018/04/27 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
最新奶茶店创业计划书
2014/01/25 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
完美的中文自荐信
2014/05/24 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
安全教育的主题班会
2015/08/13 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书