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 ui(接口)介绍
Sep 17 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
js+css3实现旋转效果
Jan 20 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 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
是否存在第一台收音机的说法
2021/03/01 无线电
用PHP读取RSS feed的代码
2008/08/01 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
js date 格式化
2017/02/15 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
Python实现打印实心和空心菱形
2019/11/23 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
中软Java笔试题
2012/11/11 面试题
汽车驾驶求职信
2013/10/25 职场文书
新学期教师寄语
2014/04/02 职场文书
军训通讯稿范文
2015/07/18 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python