JavaScript

超轻量级php框架startmvc

JS实现商城秒杀倒计时功能(动态设置秒杀时间)

更新时间:2020-09-27 05:54:01 作者:startmvc
一年一度的双十二如期而至,今天的你买买买了吗,下面小编给大家分享一个动态秒杀倒计

一年一度的双十二如期而至,今天的你买买买了吗,下面小编给大家分享一个动态秒杀倒计时功能。

效果图 


<!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实现商城秒杀倒计时功能(动态设置秒杀时间),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

js 秒杀倒计时 js抢秒杀倒计时