js+html+css实现简单日历效果

下面是 "js+html+css实现简单日历效果"的攻略：

1. 导入CSS和JS文件

在head标签中导入显示日历所需的CSS和JS文件

<head>
  <link rel="stylesheet" type="text/css" href="calendarStyle.css">
  <script type="text/javascript" src="calendar.js"></script>
</head>

2. HTML的元素和结构

在页面中添加一个包含日历的div元素：

<div class="calendar-container">
  <div class="calendar-header">
    <button class="btn prev">上一月</button>
    <h2 class="calendar-title"></h2>
    <button class="btn next">下一月</button>
  </div>
  <table class="calendar-table">
    <thead>
      <tr class="calendar-weekdays"></tr>
    </thead>
    <tbody class="calendar-days"></tbody>
  </table>
</div>

容器元素有一个类“calendar-container”，有两个子元素 - 头部和表格。头部包括一个标题、前进按钮和后退按钮。表格通过thead元素显示哪些日期在哪些列。在tbody元素中，将它们的标头(列)显示“MON”、“TUE”、“WED”等式。

3. JS的逻辑实现

JavaScript文件将创建日期，以填充日历表。定义一个名为“Calendar”类的构造函数，并将其用于创建新的日历实例。

创建Calendar的步骤：

获取当前月份和年份；
创建一个填充表格的函数；
创建一个新的日期对象，设置年份和月份，然后设置为当前月份的第一天；
根据当月第一日是星期几，确定日历的初始列数；
表格每个单元格的循环是为期一个月的日期。
将每个表格单元格填充到html日历表中；
自增一个月，直到日历结束。

class Calendar {
  constructor(selector, events) {
    this.selector = selector;
    this.events = events;
    this.date = new Date();
    this.currentYear = this.date.getFullYear();
    this.currentMonth = this.date.getMonth();
    this.daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
    this.currentDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
    this.container = document.querySelector(selector);
    this.title = this.container.querySelector(".calendar-title");
    this.weekdays = this.container.querySelector(".calendar-weekdays");
    this.days = this.container.querySelector(".calendar-days");
    this.prevBtn = this.container.querySelector(".prev");
    this.nextBtn = this.container.querySelector(".next");
    this.createCalendar();
  }

  createCalendar() {
    this.title.textContent = `${this.currentYear}年${this.currentMonth + 1}月`;
    this.weekdays.innerHTML = "";
    this.days.innerHTML = "";

    let weekdayName = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    for (let i = 0; i < weekdayName.length; i++) {
      let weekday = weekdayName[i];
      let th = document.createElement("th");
      th.textContent = weekday;
      this.weekdays.appendChild(th);
    }

    let day = 1;
    let row = document.createElement("tr");
    for (let i = 0; i < this.currentDay; i++) {
      let td = document.createElement("td");
      row.appendChild(td);
    }

    while (day <= this.daysInMonth) {
      let td = document.createElement("td");
      td.textContent = day;
      row.appendChild(td);

      if ((day + this.currentDay) % 7 === 0) {
        this.days.appendChild(row);
        row = document.createElement("tr");
      }

      day++;
    }

    if (row.children.length > 0) {
      this.days.appendChild(row);
    }

    this.prevBtn.addEventListener("click", () => {
      this.currentMonth--;
      if (this.currentMonth === -1) {
        this.currentMonth = 11;
        this.currentYear--;
      }
      this.daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
      this.currentDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
      this.createCalendar();
    });

    this.nextBtn.addEventListener("click", () => {
      this.currentMonth++;
      if (this.currentMonth === 12) {
        this.currentMonth = 0;
        this.currentYear++;
      }
      this.daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
      this.currentDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
      this.createCalendar();
    });
  }
}

let calendar = new Calendar(".calendar-container");

4. CSS的样式设置

最后，为日历设置CSS样式来使其更美观和易读。以本文为例给出样式修改：

.calendar-container {
  width: 500px;/*日历宽度*/
  margin: auto;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  background-color: #fff;
  padding: 20px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.calendar-title {
  margin: 0;
  font-size: 20px;
}

.calendar-table {
  width: 100%;
  border-collapse: collapse;
}

.calendar-weekdays {
  text-align: center;
  font-weight: bold;
  background-color: #f6f6f6;
}

.calendar-weekdays th {
  padding: 5px;
}

.calendar-days td {
  padding: 5px;
  text-align: center;
}

.calendar-days td.is-today {
  color: white;
  background-color: #2e90d9;
}

.calendar-days td.is-event {
  color: white;
  background-color: #42c878;
}

.prev, .next {
  padding: 12px;
  border: none;
  border-radius: 2px;
  background-color: #f6f6f6;
  color: #333;
  cursor: pointer;
}

.prev:hover, .next:hover {
  background-color: #e9e9e9;
}

示例

示例1: 在HTML中修改日历样式:

<div class="calendar-container" style="width: 800px;">
  <div class="calendar-header">
    <button class="btn prev">上一月</button>
    <h2 class="calendar-title"></h2>
    <button class="btn next">下一月</button>
  </div>
  <table class="calendar-table">
    <thead>
      <tr class="calendar-weekdays"></tr>
    </thead>
    <tbody class="calendar-days"></tbody>
  </table>
</div>

此示例通过设置calendar-container的width，修改日历的宽度。

示例2: 在JS中修改日历的顺序

假设我们要在日历头部添加一个显示今日日期的元素，并且将日历的前进/后退按钮调整为标题下方。

修改JS代码如下：

class Calendar {
  constructor(selector, events) {
    this.selector = selector;
    this.events = events;
    this.date = new Date();
    this.currentYear = this.date.getFullYear();
    this.currentMonth = this.date.getMonth();
    this.daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
    this.currentDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
    this.container = document.querySelector(selector);
    this.header = document.createElement("div");// 添加的元素
    this.title = this.container.querySelector(".calendar-title");
    this.subTitle = document.createElement("p");// 添加的元素
    this.weekdays = this.container.querySelector(".calendar-weekdays");
    this.days = this.container.querySelector(".calendar-days");
    this.prevBtn = this.container.querySelector(".prev");
    this.nextBtn = this.container.querySelector(".next");
    this.createCalendar();
  }

  createCalendar() {
    this.header.classList.add("calendar-header");// 添加的元素
    this.subTitle.classList.add("calendar-subtitle");// 添加的元素
    this.header.appendChild(this.title);// 修改日历头部
    this.header.appendChild(this.subTitle);// 添加的元素
    this.container.insertBefore(this.header, this.weekdays);// 修改日历头部顺序
    this.title.textContent = `${this.currentYear}年${this.currentMonth + 1}月`;
    this.subTitle.textContent = `${this.date.getFullYear()}年${this.date.getMonth() + 1}月${this.date.getDate()}日`;
    this.weekdays.innerHTML = "";
    this.days.innerHTML = "";

    let weekdayName = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    for (let i = 0; i < weekdayName.length; i++) {
      let weekday = weekdayName[i];
      let th = document.createElement("th");
      th.textContent = weekday;
      this.weekdays.appendChild(th);
    }

    let day = 1;
    let row = document.createElement("tr");
    for (let i = 0; i < this.currentDay; i++) {
      let td = document.createElement("td");
      row.appendChild(td);
    }

    while (day <= this.daysInMonth) {
      let td = document.createElement("td");
      td.textContent = day;
      row.appendChild(td);

      if ((day + this.currentDay) % 7 === 0) {
        this.days.appendChild(row);
        row = document.createElement("tr");
      }

      day++;
    }

    if (row.children.length > 0) {
      this.days.appendChild(row);
    }

    this.prevBtn.addEventListener("click", () => {
      this.currentMonth--;
      if (this.currentMonth === -1) {
        this.currentMonth = 11;
        this.currentYear--;
      }
      this.daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
      this.currentDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
      this.createCalendar();
    });

    this.nextBtn.addEventListener("click", () => {
      this.currentMonth++;
      if (this.currentMonth === 12) {
        this.currentMonth = 0;
        this.currentYear++;
      }
      this.daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
      this.currentDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
      this.createCalendar();
    });
  }
}

let calendar = new Calendar(".calendar-container");

在此示例中，我们创建了一个新的元素‘div’，并在标记中为其添加了类“calendar-header”(因为这是我们想要在页面顶部放置的)和“calendar-subtitle”，以便在日历头部中创建一个新元素。我们通过使用this.header.appendChild(this.title)和this.header.appendChild(this.subTitle)修改了日历头部。最后，通过使用this.container.insertBefore(this.header, this.weekdays)方法，将新元素添加到旧元素的前面。

通过以上两个示例，你需要了解以下几个方面来实现简单的日历：