项目中有业务需求，需要查看每个月从一号开始的每周开始结束日期，并且可以点击上一周、下一周来查看日期。
我们先把html的架子和css样式写出来
html代码
<div class="timeBox">
<a href="javascript:;" id="pre">上一周</a>
<span id="time"></span>
<a href="javascript:;" id="next">下一周</a>
</div>
css代码
.timeBox{
display:flex;
justify-content:center;
margin: 50px auto 0 auto;
}
.timeBox span{
margin:0 20px;
}
我们开始计算时间，下面是js代码
let dateTime = new Date(); // 定义全局时间
let weekCount = 0; // 定义全局当月共多少周
let week = 0; // 定义全局当天是当月的第几周
// 点击上一周
const preEl = document.querySelector("#pre");
preEl.addEventListener("click",() => {
if (week === 2) {
// 某月的第一周，设置本月的第一天
dateTime.setDate(1);
} else if (week === 1) {
// 上个月的最后一周,设置上个月的最后一天
dateTime.setDate(0);
} else {
// 某月的中间几个周
const date = dateTime.getDate();
dateTime.setDate(date - 7);
}
setWeek();
}, false);
// 点击下一周
const nextEl = document.querySelector("#next");
nextEl.addEventListener("click",() => {
if (week === weekCount - 1) {
// 某月的最后一周,设置本月的最后一天
const month = dateTime.getMonth();
dateTime.setMonth(month + 1);
dateTime.setDate(0);
} else if (week === weekCount) {
// 下个月的第一周
const month = dateTime.getMonth();
dateTime.setMonth(month + 1);
dateTime.setDate(1);
} else {
// 某月的中间几个周
const date = dateTime.getDate();
dateTime.setDate(date + 7);
}
setWeek();
}, false);
// 设置当月每周开始结束的日期
function setWeek() {
// 获取元素
const timeEl = document.querySelector("#time");
// 本月的1号是周几
const currentDate = new Date(dateTime);
currentDate.setDate(1);
let day1 = currentDate.getDay();
if (day1 === 0) {
day1 = 7;
}
// 当前月一共有多少天
const tempDate = new Date(dateTime);
const month = tempDate.getMonth();
tempDate.setMonth(month+1);
tempDate.setDate(0)
const countDate = tempDate.getDate();
// 当前月第一周有几天
const firstWeekCount = 7 - day1 + 1;
// 当前月一共有几周
let d = 1;
if (day1 != 1) {
d = 7 - day1 + 2;
}
weekCount = Math.ceil((countDate - d + 1) / 7);
if (day1 !== 1) {
weekCount = weekCount + 1;
}
// 当前时间是本月的第几周
let day = dateTime.getDay();
if (day === 0) {
day = 7;
}
week = Math.ceil((dateTime.getDate() + 7 - day) / 7);
// 当前月当前周的开始结束日期
let weekStartDate = "";
let weekEndDate = "";
if (week == 1) {// 第一周
// 开始时间
const cDate = new Date(dateTime);
cDate.setDate(1);
const sDate = getDate(cDate);
weekStartDate = `${sDate.year}-${sDate.month}-${sDate.day}`;
// 结束时间
cDate.setDate(1 + firstWeekCount - 1);
const eDate = getDate(cDate);
weekEndDate = `${eDate.year}-${eDate.month}-${eDate.day}`;
} else if (week == weekCount) { // 最后一周
// 开始时间
const cDate = new Date(dateTime);
cDate.setDate(1 + firstWeekCount + (weekCount - 2) * 7);
const sDate = getDate(cDate);
weekStartDate = `${sDate.year}-${sDate.month}-${sDate.day}`;
// 结束时间
cDate.setMonth(month+1);
cDate.setDate(0)
const eDate = getDate(cDate);
weekEndDate = `${eDate.year}-${eDate.month}-${eDate.day}`;
} else { // 中间周
// 开始时间
const cDate = new Date(dateTime);
cDate.setDate(1 + firstWeekCount + (week - 2) * 7);
const sDate = getDate(cDate);
weekStartDate = `${sDate.year}-${sDate.month}-${sDate.day}`;
// 结束时间
cDate.setDate(1 + firstWeekCount + (week - 2) * 7 + 6);
const eDate = getDate(cDate);
weekEndDate = `${eDate.year}-${eDate.month}-${eDate.day}`;
}
timeEl.innerHTML = `${weekStartDate} 至 ${weekEndDate}`;
}
// 获取时间日期
function getDate(date) {
const year = date.getFullYear();
let month = date.getMonth();
month = month + 1;
const day = date.getDate();
return {year, month, day};
}
// 初始化时间
setWeek();
下面是7月份最后一周的开始结束日期，因为只有31号，所以开始和结束日期都是31号
7月份最后一周.png
下面是7月份中间一周的开始结束日期，从周一开始到周日结束
7月份中间一周.png
下面是7月份第一周的开始结束日期，因为只有2天，所以开始是1号，结束日期是2号
7月份第一周.png
当前月的下月的1号是从周二开始的，所以就从周二开始算共六天
当前月的下月的第一周.png
网友评论