js计算每月从一号开始的每周开始结束日期，每月有多少周

项目中有业务需求，需要查看每个月从一号开始的每周开始结束日期，并且可以点击上一周、下一周来查看日期。

我们先把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