JavaScript日历函数问题：日期显示从0开始而非正确的1-31

问题根源 #

你在weekdays.forEach循环里，使用数组索引index作为日期文本内容，但数组索引是从0开始的，所以会显示0到30（对应12月的31天），而实际需要的是1到31的真实日期。

修复方案 #

有两种简单的修复方式，推荐第二种让逻辑更清晰：

方式1：直接修正文本内容

在所有createTextNode的地方，把index改为index + 1，索引加1后正好对应1到31的日期：

// 以case 0为例，所有case都需要修改
var Textnode = document.createTextNode(index + 1);

方式2：优化数据存储（更推荐）

修改getMonthInfo函数，让数组存储包含真实日期和对应星期的对象，避免索引混淆，同时简化冗余代码：

function getMonthInfo(year, month) {
    let daysInfo = [];
    let numDays = new Date(year, month, 0).getDate();

    for (let day = 1; day <= numDays; day++) {
        let weekday = new Date(year, month - 1, day).getDay();
        daysInfo.push({ day, weekday }); // 存储真实日期和对应的星期
    }

    daysInfo.forEach(function (item) {
        console.log(item.weekday, item.day);

        var number = document.createElement("p");
        var Textnode = document.createTextNode(item.day); // 直接使用真实日期
        number.appendChild(Textnode);
        // 用模板字符串拼接ID，省去重复的switch判断
        document.getElementById(`CM${item.weekday}`).appendChild(number);
    });
}

额外优化建议 #

每次调用getMonthInfo前，建议清空日期容器内的旧内容，避免重复渲染：

// 在循环前添加这段代码
for (let i = 0; i < 7; i++) {
    const container = document.getElementById(`CM${i}`);
    // 保留星期标题，删除后续的日期节点
    while (container.children.length > 1) {
        container.removeChild(container.lastChild);
    }
}

内容的提问来源于stack exchange，提问作者Braydan