JS实现商城秒杀倒计时功能(动态设置秒杀时间)
更新时间：2019年12月12日 09:38:23 作者：缘飞梦
这篇文章主要介绍了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实现开关灯效果,文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
javascript实现的样式表(CSS) 格式整理与压缩，可以分为多行与单行，非常不错。2010-05-05
JavaScript是一种解释型语言，所以能无法达到和C/Java之类的水平，限制了它能在客户端所做的事情，为了能改进他的性能，我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验，希望能帮助大家改进自己的JavaScript脚本性能。2007-02-02
这篇文章主要为大家详细介绍了bootstrap警告框使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
下面小编就为大家带来一篇浅谈javascript运算符——条件,逗号,赋值,()和void运算符。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
js数组操作学习总结。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要为大家详细介绍了js实现登录与注册界面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
下面小编就为大家带来一篇js重写方法的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要为大家详细介绍了原生js实现轮播图特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
今天就给大家介绍一个特别基础的东西，javascript中函数的一点儿小知识之js代码的执行顺序问题，需要的朋友参考下吧2017-10-10
最新评论