写的很随便的一个js日历

日历需要的页面元素

当前日历主要包含三个部分的元素分别是：

1.当前日期

2.月份以及年份跳转按钮

3.当前这个月的所有日期显示

个人实现思路

1.先写好当前时间年份月份静态元素，通过document.querySelectorAll（）.forEach((item)=>{})绑定每一个月份和年份跳转的按钮，实例化 new Date 并赋值给date。

分别使用

date.getFullYear();获取当前年份

date.getMonth() + 1;获取当前月份（月份从0开始计算到11结束）

date.getDate();获取当前日期

let week = date.getDay();获取当天的星期数（从星期天开始到星期六结束）0-6

2.开始渲染当前这个月所有的日期数

渲染的日期数有三个部分：当前月份，当月一号之前的天数，当月最后一天后面的天数的部分，

先从月份前天数开始，获取上一个月最后一天的星期数，上个月最后一天的天数，相减获取第一行星期一的天数。以最后一天星期数作为结束条件开始循环。

给每一个div元素添加样式 使用setAttribute("添加的属性名","添加的属性值")

（本实例使用chineseLunar插件提供的阳历阴历转换功能）

function weekLastSpace(date) {
  let week = new Date(date.getFullYear(), date.getMonth(), 0).getDay();//获取上个月的最后一天星期数
  let lastMendDay = new Date(date.getFullYear(), date.getMonth(), 0).getDate();
  lastMendDay = lastMendDay - week;//获取第一行第一天的数字
  for (let i = 0; i < week; i++) {
    let div = document.createElement("div");
    div.setAttribute("style", cssStrLast);
    lastMendDay++;
    div.innerHTML = lastMendDay + "<br>" + chineseLunar.format(chineseLunar.solarToLunar(new Date(date.getFullYear(), date.getMonth() - 1, lastMendDay)), 'D');
    document.querySelector(".contentDay").appendChild(div);//插入到页面元素中
  }
}

 当月天数渲染需要获取当月天数第一天和最后一天的数之后套入循环插入到dom元素中

ps：（Date对象在日期参数中写上0就会使当前日期对象变为上一个月最后一天）

function divDay(date) {
  let dayend = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();//获取这个月的最后一天
  let nowday = new Date().getDate();
  for (let i = 1; i <= dayend; i++) {
    let div = document.createElement("div");
    div.setAttribute("style", cssStr);
    div.innerHTML = i + "<br>" + chineseLunar.format(chineseLunar.solarToLunar(new Date(date.getFullYear(), date.getMonth(), i)), 'D');
    if (i == nowday) {
      div.style.color = "red";
    }
    document.querySelector(".contentDay").appendChild(div);
  }
}

最后一天自己看代码也都懂

function weekendspace(date) {
  //获取当前这个月最后一天是星期几
  let dayendweek = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDay();
  for (let i = 1; i <= 7 - dayendweek; i++) {
    let div = document.createElement("div");
    div.setAttribute("style", cssStrLast);
    div.innerHTML = i + "<br>" + chineseLunar.format(chineseLunar.solarToLunar(new Date(date.getFullYear(), date.getMonth() + 1, i)), 'D');;
    document.querySelector(".contentDay").appendChild(div);
  }
}

以下附上全部js代码（如有不对欢迎大佬前来指正）

let date = new Date();
let y = date.getFullYear();
let m = date.getMonth() + 1;
let d = date.getDate();
let week = date.getDay();
document.querySelector(".Ym").innerHTML = `${y}年${m}月${d}日`;
let content = document.querySelector(".content");
let cssStr = `width:14%; height:10%; display: inline-block; text-align: center;`;
let cssStrLast = "width:14%; height:10%; display: inline-block; text-align: center; color:gray;";
console.log(document.querySelectorAll("#index > div > button"));
//给所有的按钮绑定点击使事件
document.querySelectorAll("#index > div > button").forEach((item) => {
  item.onclick = function () {
    document.querySelector(".contentDay").innerHTML = "";
    if (this.innerHTML == "上一年") {

      date.setFullYear(date.getFullYear() - 1);
    } else if (this.innerHTML == "上个月") {

      date.setMonth(date.getMonth() - 1 < -1 ? 11 : date.getMonth() - 1);
      date.setFullYear(date.getMonth() - 1 < -1 ? date.getFullYear() - 1 : date.getFullYear());
    } else if (this.innerHTML == "下个月") {

      date.setMonth(date.getMonth() + 1 > 12 ? 0 : date.getMonth() + 1);
      date.setFullYear(date.getMonth() + 1 > 12 ? date.getFullYear() + 1 : date.getFullYear());
    } else if (this.innerHTML == "下一年") {

      date.setFullYear(date.getFullYear() + 1);
    }
    weeklastspace(date);
    divDay(date);
    weekendspace(date);
    document.querySelector(".Ym").innerHTML = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
  }
})
//渲染日期前面空格
/**
 * 渲染一号之前的日期
 * @param {Date} date 当前时间Date对象
 */
function weeklastspace(date) {
  let week = new Date(date.getFullYear(), date.getMonth(), 0).getDay();//获取上个月的最后一天
  let lastMendDay = new Date(date.getFullYear(), date.getMonth(), 0).getDate();
  lastMendDay = lastMendDay - week;//获取第一行第一天的数字
  for (let i = 0; i < week; i++) {
    let div = document.createElement("div");
    div.setAttribute("style", cssStrLast);
    lastMendDay++;
    div.innerHTML = lastMendDay + "<br>" + chineseLunar.format(chineseLunar.solarToLunar(new Date(date.getFullYear(), date.getMonth() - 1, lastMendDay)), 'D');
    document.querySelector(".contentDay").appendChild(div);
  }
}
weeklastspace(date);
//渲染日期
/**
 * 渲染当前这个月的所有日期
 * @param {Date} date 
 */
function divDay(date) {
  let dayend = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();//获取这个月的最后一天
  let nowday = new Date().getDate();
  for (let i = 1; i <= dayend; i++) {
    let div = document.createElement("div");
    div.setAttribute("style", cssStr);
    div.innerHTML = i + "<br>" + chineseLunar.format(chineseLunar.solarToLunar(new Date(date.getFullYear(), date.getMonth(), i)), 'D');
    if (i == nowday) {
      div.style.color = "red";
    }
    document.querySelector(".contentDay").appendChild(div);
  }
}
divDay(date);
//渲染div后面的空格
/**
 * 渲染后面时间日期
 * @param {Date} date 
 */
function weekendspace(date) {
  //获取当前这个月最后一天是星期几
  let dayendweek = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDay();
  for (let i = 1; i <= 7 - dayendweek; i++) {
    let div = document.createElement("div");
    div.setAttribute("style", cssStrLast);
    div.innerHTML = i + "<br>" + chineseLunar.format(chineseLunar.solarToLunar(new Date(date.getFullYear(), date.getMonth() + 1, i)), 'D');;
    document.querySelector(".contentDay").appendChild(div);
  }
}
weekendspace(date);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>日历</title>
  
  <style>
    #index{
      width: 500px;
      height: 400px;
      border:3px solid #000;
      display:flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .content{
      min-width: 100%;
      height: 80%;
      border: 1px solid #000;
      flex-direction: column;
    }
  </style>
</head>
<body>
  <div id="index">
    <span class="Ym">2022年12月11日</span>
    <div>
      <button class="Y last" >上一年</button>
      <button class="M last" >上个月</button>
      <button class="M Next" >下个月</button>
      <button class="Y next" >下一年</button>
    </div>
    <div class="content" style="display: flex;">
      <div class="week" style="height: 10%; display:flex; justify-content:space-evenly;">
        <div>星期一</div>
        <div>星期二</div>
        <div>星期三</div>
        <div>星期四</div>
        <div>星期五</div>
        <div>星期六</div>
        <div>星期日</div>
      </div>
      <div class="contentDay" style="height: 90%;"></div>
    </div>
  </div>
</body> 

<script src="./node_modules/chinese-lunar/lib/chinese-lunar.js"></script>
<script src="./htmljs.js"></script>
</html>