使用js编写样式好看,功能齐全,能够选择年,月,日的万年历案例

以下是一个使用 JavaScript 编写的简单万年历：

HTML 代码：

<div class="calendar">
  <div class="header">
    <span class="prev" onclick="prevMonth()">&lt;</span>
    <span class="month-year"></span>
    <span class="next" onclick="nextMonth()">&gt;</span>
  </div>
  <div class="weekdays">
    <span>日</span>
    <span>一</span>
    <span>二</span>
    <span>三</span>
    <span>四</span>
    <span>五</span>
    <span>六</span>
  </div>
  <div class="days"></div>
</div>

CSS 代码：

.calendar {
  width: 280px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f5f5f5;
}

.weekdays {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background-color: #f5f5f5;
}

.weekdays span {
  width: 36px;
  text-align: center;
}

.days {
  display: flex;
  flex-wrap: wrap;
  padding: 5px 10px;
}

.days span {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}

.days span.today {
  background-color: #f5f5f5;
}

.days span.selected {
  background-color: #007aff;
  color: #fff;
}

JavaScript 代码：

const calendarEl = document.querySelector('.calendar');
const monthYearEl = calendarEl.querySelector('.month-year');
const daysEl = calendarEl.querySelector('.days');

let currentDate = new Date();

function renderCalendar() {
  monthYearEl.textContent = `${currentDate.getFullYear()}年${currentDate.getMonth() + 1}月`;

  // 计算本月第一天和最后一天的日期
  const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
  const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);

  // 计算本月第一天之前和最后一天之后的日期
  const prevDaysCount = firstDay.getDay();
  const nextDaysCount = 6 - lastDay.getDay();

  let daysHtml = '';

  // 渲染本月之前的日期
  for (let i = prevDaysCount - 1; i >= 0; i--) {
    const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), -i);
    daysHtml += `<span class="prev-month" onclick="selectDate('${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}')">${date.getDate()}</span>`;
  }

  // 渲染本月的日期
  for (let i = 1; i <= lastDay.getDate(); i++) {
    const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);

    if (isToday(date)) {
      daysHtml += `<span class="today" onclick="selectDate('${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}')">${i}</span>`;
    } else {
      daysHtml += `<span onclick="selectDate('${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}')">${i}</span>`;
    }
  }

  // 渲染本月之后的日期
  for (let i = 1; i <= nextDaysCount; i++) {
    const date = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, i);
    daysHtml += `<span class="next-month" onclick="selectDate('${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}')">${date.getDate()}</span>`;
  }

  daysEl.innerHTML = daysHtml;
}

function isToday(date) {
  const today = new Date();
  return date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate();
}

function prevMonth() {
  currentDate.setMonth(currentDate.getMonth() - 1);
  renderCalendar();
}

function nextMonth() {
  currentDate.setMonth(currentDate.getMonth() + 1);
  renderCalendar();
}

function selectDate(dateStr) {
  const selectedEl = daysEl.querySelector('.selected');
  if (selectedEl) {
    selectedEl.classList.remove('selected');
  }
  const dateEl = daysEl.querySelector(`[onclick="selectDate('${dateStr}')"]`);
  dateEl.classList.add('selected');
  console.log(dateStr);
}

renderCalendar();

这个万年历可以显示当前月份的日历，可以通过左右箭头切换月份，并且可以选择日期。