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方法和技巧大全
Dec 27 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
JavaScript中对象介绍
Dec 31 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 Javascript
小程序实现文字循环滚动动画
Jun 14 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 已经成熟
2006/12/04 PHP
PHP 日期加减的类,很不错
2009/10/10 PHP
Destoon实现多表查询示例
2014/08/21 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
Python 3中的yield from语法详解
2017/01/18 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
Python处理中文标点符号大集合
2018/05/14 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
如何编写python的daemon程序
2021/01/07 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
英国在线花园中心:You Garden
2018/06/03 全球购物
PHP如何自定义函数
2016/09/16 面试题
Java语言的优势
2015/01/10 面试题
劳动争议仲裁代理词
2015/05/25 职场文书
电影建党伟业观后感
2015/06/01 职场文书