忧郁之子
JavaScript拼团日期倒计时
这篇文章主要为大家详细介绍了js实现页面多个日期时间倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js的日期倒计时在日常项目中还是比较常用的，活动、拼团功能最为常见，先分析最要是处理好日期函数，然后一个页面上有多个倒计时情况下的方法；
来，先看下 拼多多 的拼单倒计时的效果：
那么，先上个代码吧：
页面布局代码：
<div class="mytime jsTime" data-time="2019-06-21 16:58:00">时间1</div>
<div class="mytime jsTime" data-time="2019-06-22 18:00:02">时间2</div>
<div class="mytime jsTime" data-time="2019-06-23 19:01:31">时间3</div>
<div class="mytime jsTime" data-time="2019-04-06 05:05:15">时间4</div>
<div class="mytime jsTime" data-time="2019-04-07 09:01:43">时间5</div>CSS样式代码：
<style>
.mytime{ line-height: 40px; width: 300px; margin: 0 auto;}
</style>方法一：
<script>
const countdown = {
domList : document.querySelectorAll('.jsTime'),
formatNumber(n){
// return n.toString().padStart(2, '0'); // 用padStart方法要注意兼容问题
n = n.toString();
return n[1] ? n : '0' + n;
},
setTime(dom){
//获取设置的时间 如：2019-3-28 14:00:00 ios系统得加正则.replace(/\-/g, '/');
const leftTime = new Date(dom.getAttribute('data-time').replace(/\-/g, '/')) - new Date();
if (leftTime >= 0) {
const d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
const h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
const m = Math.floor(leftTime / 1000 / 60 % 60);
const s = Math.floor(leftTime / 1000 % 60);
dom.innerHTML = `剩余${ d > 0 ? d + '天' : '' }${ [h, m, s].map(this.formatNumber).join(':') }`;
} else {
clearInterval(dom.$timer);
dom.innerHTML = '拼团已结束';
}
},
start(){
this.domList.forEach((dom) => {
this.setTime(dom);
dom.$timer = setInterval(() => {
this.setTime(dom);
}, 1e3);
});
},
};
countdown.start();
</script>方法二：
<script>
//时间格式处理
const formatNumber = n => {
n = n.toString();
return n[1] ? n : '0' + n;
};
//团购倒计时
const teamCountTime = (obj) => {
var timer = null;
function fn(){
//获取设置的时间 如：2019-3-28 14:00:00 ios系统得加正则.replace(/\-/g, '/');
var setTime = obj.getAttribute('data-time').replace(/\-/g, '/');
//获取当前时间
var date = new Date(),
now = date.getTime(),
endDate = new Date(setTime),
end = endDate.getTime();
//时间差
var leftTime = end - now;
//d,h,m,s 天时分秒
var d, h,m,s;
var otime = '';
if (leftTime >= 0) {
d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
if (d <= 0) {
otime = [h, m, s].map(formatNumber).join(':');
} else {
otime = d + '天' + [h, m, s].map(formatNumber).join(':');
}
obj.innerHTML = '剩余' + otime;
//
timer = setTimeout(fn, 1e3);
} else {
clearTimeout(timer);
obj.innerHTML = '拼团已结束';
}
}
fn();
};
let jsTimes = document.querySelectorAll('.jsTime2');
jsTimes.forEach((obj) => {
teamCountTime(obj);
});
</script>完整代码：
<!--wxfollow start-->
<html>
<head>
<meta charset="UTF-8" />
<title>js拼团日期倒计时</title>
<style>
.mytime{ line-height: 40px; width: 300px; margin: 0 auto;}
</style>
</head>
<body>
<div class="mytime jsTime" data-time="2019-06-21 16:58:00">
时间1
</div>
<div class="mytime jsTime" data-time="2019-06-22 18:00:02">
时间2
</div>
<div class="mytime jsTime" data-time="2019-06-23 19:01:31">
时间3
</div>
<div class="mytime jsTime" data-time="2019-06-20 22:15:15">
时间4
</div>
<div class="mytime jsTime" data-time="2019-04-07 09:01:43">
时间5
</div>
<!-- 方法1 -->
<script>
const countdown = {
domList : document.querySelectorAll('.jsTime'),
formatNumber(n){
// return n.toString().padStart(2, '0'); // 用padStart方法要注意兼容问题
n = n.toString();
return n[1] ? n : '0' + n;
},
setTime(dom){
//获取设置的时间 如：2019-3-28 14:00:00 ios系统得加正则.replace(/\-/g, '/');
const leftTime = new Date(dom.getAttribute('data-time').replace(/\-/g, '/')) - new Date();
if (leftTime >= 0) {
const d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
const h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
const m = Math.floor(leftTime / 1000 / 60 % 60);
const s = Math.floor(leftTime / 1000 % 60);
dom.innerHTML = `剩余${ d > 0 ? d + '天' : '' }${ [h, m, s].map(this.formatNumber).join(':') }`;
} else {
clearInterval(dom.$timer);
dom.innerHTML = '拼团已结束';
}
},
start(){
this.domList.forEach((dom) => {
this.setTime(dom);
dom.$timer = setInterval(() => {
this.setTime(dom);
}, 1e3);
});
},
};
countdown.start();
</script>
<!-- 方法2 -->
<script>
//时间格式处理
const formatNumber = n => {
n = n.toString();
return n[1] ? n : '0' + n;
};
//团购倒计时
const teamCountTime = (obj) => {
var timer = null;
function fn(){
//获取设置的时间 如：2019-3-28 14:00:00 ios系统得加正则.replace(/\-/g, '/');
var setTime = obj.getAttribute('data-time').replace(/\-/g, '/');
//获取当前时间
var date = new Date(),
now = date.getTime(),
endDate = new Date(setTime),
end = endDate.getTime();
//时间差
var leftTime = end - now;
//d,h,m,s 天时分秒
var d, h,m,s;
var otime = '';
if (leftTime >= 0) {
d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
if (d <= 0) {
otime = [h, m, s].map(formatNumber).join(':');
} else {
otime = d + '天' + [h, m, s].map(formatNumber).join(':');
}
obj.innerHTML = '剩余' + otime;
//
timer = setTimeout(fn, 1e3);
} else {
clearTimeout(timer);
obj.innerHTML = '拼团已结束';
}
}
fn();
};
let jsTimes = document.querySelectorAll('.jsTime2');
jsTimes.forEach((obj) => {
teamCountTime(obj);
});
</script>
</body>
</html><!--wxfollow end-->
案例效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持轩宇网。
原文链接：https://blog.csdn.net/weixin_42211816/article/details/88871407