手写最简化日历

💫 主题: 生成日历表格

🤓 用户:

function createCalendar(elem, year, month) {
    const theFirstDay = new Date(year, month - 1, 1) // 当月第一天
    const theLastDay = new Date(year, month, 0) // 当月最后一天
    let current = 0
    let flag = false
    console.log(theFirstDay.toLocaleDateString())
    console.log(theLastDay.toLocaleDateString())

    let table = document.createElement('table')
    let thead = document.createElement('thead')
    let tbody = document.createElement('tbody')
    elem.appendChild(table).appendChild(thead)
    table.append(tbody)

    for (let i = 0; i < 7; i++) {
        let tr = document.createElement('tr')
        if (i === 0) {
            thead.append(tr)
        } else {
            tbody.append(tr)
        }

        for (let j = 0; j < 7; j++) {
            // 第一行都是th
            if (i === 0) {
                let th = document.createElement('th')
                tr.append(th)
                continue
            }
            let td = document.createElement('td')
            tr.append(td)

            // 找准第一个点
            if (flag || (j + 1) % 7 === theFirstDay.getDay()) {
                if (current === theLastDay.getDate()) continue
                td.textContent = (++current).toString()
                flag = true
            }
        }
    }

    thead.rows[0].cells[0].textContent = 'MO'
    thead.rows[0].cells[1].textContent = 'TU'
    thead.rows[0].cells[2].textContent = 'WE'
    thead.rows[0].cells[3].textContent = 'TH'
    thead.rows[0].cells[4].textContent = 'FR'
    thead.rows[0].cells[5].textContent = 'SA'
    thead.rows[0].cells[6].textContent = 'SU'

    // 移除最后的空行
    if (tbody.rows[5].cells[0].textContent === '') {
        tbody.rows[5].remove()
    }
}

createCalendar(document.getElementById('cal'), 2024, 9)

🤖 ChatGPT (助手):

这段代码的目的是在网页上创建一个指定月份的日历。让我们逐步分析代码的工作原理。

1. 函数定义

function createCalendar(elem, year, month) {

createCalendar 函数接受三个参数：

• elem：一个 DOM 元素，用于插入生成的日历表格。
• year：年份。
• month：月份（1 到 12）。

2. 获取当月的第一天和最后一天

const theFirstDay = new Date(year, month - 1, 1) // 当月第一天
const theLastDay = new Date(year, month, 0) // 当月最后一天

• theFirstDay 是当月的第一天。
• theLastDay 是当月的最后一天。注意 month 参数传递给 Date 构造函数时，月份是从 0 开始的，所以这里传递 month 会得到下个月的第 0 天，即当月的最后一天。

3. 初始化变量和创建表格元素

let current = 0
let flag = false
console.log(theFirstDay.toLocaleDateString())
console.log(theLastDay.toLocaleDateString())

let table = document.createElement('table')
let thead = document.createElement('thead')
let tbody = document.createElement('tbody')
elem.appendChild(table).appendChild(thead)
table.append(tbody)

• current 用于记录当前日期。
• flag 用于标记是否已经开始填充日期。
• 创建 table、thead 和 tbody 元素，并将它们添加到 elem 中。

4. 构建表格

for (let i = 0; i < 7; i++) {
    let tr = document.createElement('tr')
    if (i === 0) {
        thead.append(tr)
    } else {
        tbody.append(tr)
    }

    for (let j = 0; j < 7; j++) {
        // 第一行都是th
        if (i === 0) {
            let th = document.createElement('th')
            tr.append(th)
            continue
        }
        let td = document.createElement('td')
        tr.append(td)

        // 找准第一个点
        if (flag || (j + 1) % 7 === theFirstDay.getDay()) {
            if (current === theLastDay.getDate()) continue
            td.textContent = (++current).toString()
            flag = true
        }
    }
}

• 外层循环 i 生成 7 行。
  • 第一行 (i === 0) 是表头行，包含星期几的名称。
  • 其余 6 行是日期行。
• 内层循环 j 生成每行的 7 列。
  • 第一行的每个单元格是 th 元素（表头单元格）。
  • 其余行的每个单元格是 td 元素（表格单元格）。
  • flag 用于标记是否已经开始填充日期。
  • 当 j + 1 的余数等于 theFirstDay.getDay() 时，开始填充日期。
  • 通过 current 记录当前日期，并在单元格中填充日期。

5. 填充表头

thead.rows[0].cells[0].textContent = 'MO'
thead.rows[0].cells[1].textContent = 'TU'
thead.rows[0].cells[2].textContent = 'WE'
thead.rows[0].cells[3].textContent = 'TH'
thead.rows[0].cells[4].textContent = 'FR'
thead.rows[0].cells[5].textContent = 'SA'
thead.rows[0].cells[6].textContent = 'SU'

设置表头行的内容为星期一到星期日。

6. 移除最后的空行

// 移除最后的空行
if (tbody.rows[5].cells[0].textContent === '') {
    tbody.rows[5].remove()
}

如果最后一行是空的（即没有任何日期），则移除该行。

7. 调用函数

createCalendar(document.getElementById('cal'), 2024, 9)

调用 createCalendar 函数，生成 2024 年 9 月的日历，并插入到 ID 为 cal 的元素中。

总结

这段代码通过创建一个 HTML 表格元素，生成指定月份的日历。它根据月份的第一天和最后一天来填充日期，并在表头显示星期几。最后，如果最后一行是空的，则将其移除。