利用html,css和js制作简单日历

好的，以下是一个简单的日历制作示例：

HTML代码：

<div class="calendar">
  <div class="month">
    <ul>
      <li class="prev">&#10094;</li>
      <li class="next">&#10095;</li>
      <li>
        <span id="month"></span>
        <br>
        <span id="year"></span>
      </li>
    </ul>
  </div>
  <ul class="weekdays">
    <li>Sun</li>
    <li>Mon</li>
    <li>Tue</li>
    <li>Wed</li>
    <li>Thu</li>
    <li>Fri</li>
    <li>Sat</li>
  </ul>
  <ul class="days">
  </ul>
</div>

CSS代码：

.calendar {
  width: 250px;
  font-family: Arial, sans-serif;
}

.month {
  padding: 10px 25px;
  background: #1abc9c;
  text-align: center;
  color: white;
}

.month ul {
  margin: 0;
  padding: 0;
}

.month ul li {
  list-style: none;
  display: inline-block;
  margin: 0 5px;
  cursor: pointer;
}

.month ul li:hover {
  background: #fff;
  color: #1abc9c;
}

.month .prev,
.month .next {
  font-size: 18px;
  margin-top: -2px;
}

.weekdays {
  margin: 0;
  padding: 10px 0;
  background-color: #ddd;
  list-style: none;
}

.weekdays li {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: #666;
}

.days {
  padding: 10px 0;
  background: #eee;
  list-style: none;
}

.days li {
  list-style: none;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-bottom: 5px;
  font-size: 14px;
  color: #777;
}

.days li .active {
  padding: 5px;
  background: #1abc9c;
  color: white !important
}

JavaScript代码：

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];

const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

const calendar = document.querySelector(".calendar");
const monthText = document.querySelector("#month");
const yearText = document.querySelector("#year");

const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");

const daysList = document.querySelector(".days");

let currentDate = new Date();
let currentMonth = currentDate.getMonth();
let currentYear = currentDate.getFullYear();

monthText.textContent = months[currentMonth];
yearText.textContent = currentYear;

function getDaysInMonth(month, year) {
  return new Date(year, month + 1, 0).getDate();
}

function getFirstDayOfWeek(month, year) {
  return new Date(year, month, 1).getDay();
}

function generateCalendar() {
  daysList.innerHTML = "";

  const daysInMonth = getDaysInMonth(currentMonth, currentYear);
  const firstDayOfWeek = getFirstDayOfWeek(currentMonth, currentYear);

  for (let i = 0; i < firstDayOfWeek; i++) {
    const li = document.createElement("li");
    daysList.appendChild(li);
  }

  for (let i = 1; i <= daysInMonth; i++) {
    const li = document.createElement("li");
    li.textContent = i;
    if (
      i === currentDate.getDate() &&
      currentMonth === currentDate.getMonth() &&
      currentYear === currentDate.getFullYear()
    ) {
      li.classList.add("active");
    }
    daysList.appendChild(li);
  }
}

generateCalendar();

prevBtn.addEventListener("click", () => {
  currentYear = currentMonth === 0 ? currentYear - 1 : currentYear;
  currentMonth = currentMonth === 0 ? 11 : currentMonth - 1;

  monthText.textContent = months[currentMonth];
  yearText.textContent = currentYear;

  generateCalendar();
});

nextBtn.addEventListener("click", () => {
  currentYear = currentMonth === 11 ? currentYear + 1 : currentYear;
  currentMonth = (currentMonth + 1) % 12;

  monthText.textContent = months[currentMonth];
  yearText.textContent = currentYear;

  generateCalendar();
});

以上代码可以生成一个简单的日历，使用了 HTML、CSS 和 JavaScript 实现。