原生 JavaScript 造日历轮子：从零开始

2024-02-22 18:12:42

原生 JavaScript 实现造日历轮子

说到日历，小伙伴们并不陌生吧，当我们开发前端网页的时候，面对时间的展示需求，日历控件是必不可少的。今天我们来聊聊如何使用原生 JavaScript 造一个日历轮子，这是在面试中经常会遇到的问题，当然，如果你能独立造一个轮子，那绝对能给面试官留下深刻的印象。

首先，我们先来分析下日历的组成，一个日历一般由年月、星期、日期等组成。其中，年月和星期是固定的，而日期是随着年月变化而变化的。因此，我们可以先定义一个 Calendar 类，然后通过这个类来生成日历。

class Calendar {
  constructor(year, month) {
    this.year = year || new Date().getFullYear();
    this.month = month || new Date().getMonth() + 1;
    this.createDom();
  }

  createDom() {
    // ...
  }
}

在 createDom() 方法中，我们可以根据年月来动态创建日历的 DOM 结构。比如，我们可以先创建一个表格，然后根据年月来填充表格中的内容。

createDom() {
  const table = document.createElement('table');
  const thead = document.createElement('thead');
  const tbody = document.createElement('tbody');

  // 创建表头
  const tr = document.createElement('tr');
  const ths = ['日', '一', '二', '三', '四', '五', '六'];
  ths.forEach(th => {
    const thEl = document.createElement('th');
    thEl.textContent = th;
    tr.appendChild(thEl);
  });
  thead.appendChild(tr);

  // 创建表身
  const days = this.getDays();
  for (let i = 0; i < days.length; i += 7) {
    const tr = document.createElement('tr');
    for (let j = 0; j < 7; j++) {
      const tdEl = document.createElement('td');
      tdEl.textContent = days[i + j];
      tr.appendChild(tdEl);
    }
    tbody.appendChild(tr);
  }

  table.appendChild(thead);
  table.appendChild(tbody);

  document.body.appendChild(table);
}