html+js实现日历

HTML和JS可以很方便地实现一个简单的日历。以下是一个基本的示例：

HTML部分：

<div id="calendar"></div>

JS部分：

// 获取当前日期
var currentDate = new Date();

// 获取年份和月份
var currentYear = currentDate.getFullYear();
var currentMonth = currentDate.getMonth();

// 显示日历
showCalendar(currentYear, currentMonth);

// 上个月按钮点击事件
document.getElementById("prevMonth").addEventListener("click", function() {
  currentMonth--;
  if (currentMonth < 0) {
    currentYear--;
    currentMonth = 11;
  }
  showCalendar(currentYear, currentMonth);
});

// 下个月按钮点击事件
document.getElementById("nextMonth").addEventListener("click", function() {
  currentMonth++;
  if (currentMonth > 11) {
    currentYear++;
    currentMonth = 0;
  }
  showCalendar(currentYear, currentMonth);
});

// 日历显示函数
function showCalendar(year, month) {
  var calendarElement = document.getElementById("calendar");
  var calendarHTML = "";

  // 生成标题
  calendarHTML += "<h2>" + year + "年" + (month + 1) + "月</h2>";

  // 生成上个月按钮
  calendarHTML += "<button id='prevMonth'>上个月</button>";

  // 生成下个月按钮
  calendarHTML += "<button id='nextMonth'>下个月</button>";

  // 生成表格
  calendarHTML += "<table>";

  // 生成表头
  calendarHTML += "<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";

  // 获取当月第一天和最后一天的日期对象
  var firstDay = new Date(year, month, 1);
  var lastDay = new Date(year, month + 1, 0);

  // 获取当月第一天是星期几
  var firstDayOfWeek = firstDay.getDay();

  // 获取当月总共有多少天
  var totalDays = lastDay.getDate();

  // 生成日期表格
  var date = 1;
  for (var i = 0; i < 6; i++) {
    calendarHTML += "<tr>";
    for (var j = 0; j < 7; j++) {
      if (i === 0 && j < firstDayOfWeek) {
        // 空白格
        calendarHTML += "<td></td>";
      } else if (date > totalDays) {
        // 空白格
        calendarHTML += "<td></td>";
      } else {
        // 日期格
        calendarHTML += "<td>" + date + "</td>";
        date++;
      }
    }
    calendarHTML += "</tr>";
    if (date > totalDays) {
      break;
    }
  }

  calendarHTML += "</table>";

  // 将生成的日历HTML添加到页面中
  calendarElement.innerHTML = calendarHTML;
}

这个JS函数可以根据指定的年份和月份生成对应的日历表格，并且提供了上一个月和下一个月切换的功能。在HTML中，我们只需要一个`<div>`元素来显示日历。