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 相关文章推荐
js跟随滚动条滚动浮动代码
Dec 31 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
详解AngularJS 模块化
Jun 14 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
vue2.0安装style/css loader的方法
Mar 14 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
Vue 实现html中根据类型显示内容
Oct 28 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
我的论坛源代码(二)
2006/10/09 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
js星星评分效果
2014/07/24 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
详细解读Python中的__init__()方法
2015/05/02 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
对Django中内置的User模型实例详解
2019/08/16 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
Python表达式的优先级详解
2020/02/18 Python
Python 合并拼接字符串的方法
2020/07/28 Python
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
如何选择使用结构还是类
2014/05/30 面试题
中专毕业自我鉴定
2013/10/16 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
大学老师推荐信
2014/02/25 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
销售员试用期自我评价
2014/09/15 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
Python必备技巧之字符数据操作详解
2022/03/23 Python
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL