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

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

以上是 JS实现商城秒杀倒计时功能(动态设置秒杀时间) 的全部内容, 来源链接: utcz.com/z/350731.html

回到顶部