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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 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
PHP 采集心得技巧
2009/05/15 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
浅谈mint-ui 填坑之路
2017/11/06 Javascript
浅析vue深复制
2018/01/29 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
Python下singleton模式的实现方法
2014/07/16 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
Python实现基于POS算法的区块链
2018/08/07 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
校园之声广播稿
2014/01/31 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
车辆委托书范本
2014/10/05 职场文书
项目转让协议书
2014/10/27 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
领导新年致辞2016
2015/07/29 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python