如何修改HTML日历代码：替换年月选择器为前后月/日切换按钮

没问题，我已经把你原来的年月选择器替换成四个功能按钮啦，下面是修改后的完整代码，不仅能切换月份，还能按天前后跳转，而且当前选中的日期会有高亮显示哦：

<HTML>
<HEAD>
<TITLE>Calendar</TITLE>
<STYLE TYPE="text/css">
TD, TH {text-align:center; padding: 8px;}
button {padding: 6px 12px; margin: 0 4px; cursor: pointer;}
#calendarTable {border-collapse: collapse;}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function getFirstDay(theYear, theMonth){
 var firstDate = new Date(theYear,theMonth,1)
 return firstDate.getDay()
}
function getMonthLen(theYear, theMonth) {
 var oneDay = 1000 * 60 * 60 * 24
 var thisMonth = new Date(theYear, theMonth, 1)
 var nextMonth = new Date(theYear, theMonth + 1, 1)
 var len = Math.ceil((nextMonth.getTime() - thisMonth.getTime())/oneDay)
 return len
}
var theMonths = ["January","February","March","April","May","June","July","August", "September","October","November","December"]
function getObject(obj) {
 var theObj
 if (document.all) {
 if (typeof obj == "string") {
 return document.all(obj)
 } else {
 return obj.style
 }
 }
 if (document.getElementById) {
 if (typeof obj == "string") {
 return document.getElementById(obj)
 } else {
 return obj.style
 }
 }
 return null
}

// 全局变量跟踪当前显示的日期
var currentDate;

// 渲染日历的核心函数
function populateCalendar() {
 var theYear = currentDate.getFullYear();
 var theMonth = currentDate.getMonth();
 var currentDay = currentDate.getDate();
 
 // 计算当月第一天是星期几，当月总天数
 var firstDay = getFirstDay(theYear, theMonth)
 var howMany = getMonthLen(theYear, theMonth)
 
 // 更新表头的年月显示
 getObject("tableHeader").innerHTML = theMonths[theMonth] + " " + theYear
 
 // 清空现有日历行
 var TBody = getObject("tableBody")
 while (TBody.rows.length > 0) {
 TBody.deleteRow(0)
 }
 
 var dayCounter = 1
 var newR, newC
 var done=false
 while (!done) {
 newR = TBody.insertRow(TBody.rows.length)
 for (var i = 0; i < 7; i++) {
 newC = newR.insertCell(newR.cells.length)
 if (TBody.rows.length == 1 && i < firstDay) {
 newC.innerHTML = ""
 continue
 }
 if (dayCounter == howMany) {
 done = true
 }
 // 给当前选中的日期添加高亮背景
 if (dayCounter === currentDay && theMonth === currentDate.getMonth() && theYear === currentDate.getFullYear()) {
 newC.style.backgroundColor = "#e0f7fa";
 newC.style.fontWeight = "bold";
 } else {
 newC.style.backgroundColor = "";
 newC.style.fontWeight = "normal";
 }
 newC.innerHTML = (dayCounter <= howMany)? dayCounter++ : ""
 }
 }
}

// 上月按钮点击事件
function prevMonth() {
 currentDate.setMonth(currentDate.getMonth() - 1);
 populateCalendar();
}

// 下月按钮点击事件
function nextMonth() {
 currentDate.setMonth(currentDate.getMonth() + 1);
 populateCalendar();
}

// 前一天按钮点击事件
function prevDay() {
 currentDate.setDate(currentDate.getDate() - 1);
 populateCalendar();
}

// 后一天按钮点击事件
function nextDay() {
 currentDate.setDate(currentDate.getDate() + 1);
 populateCalendar();
}
</SCRIPT>
</HEAD>
<BODY onLoad="currentDate = new Date(); populateCalendar()">
<H1>Calendar</H1>
<HR>
<TABLE style="width:100%;height:80%;" ID="calendarTable" BORDER=1 ALIGN="center">
<TR>
<TH ID="tableHeader" COLSPAN=7 STYLE="padding:10px;"></TH>
</TR>
<TR><TH>Sun</TH><TH>Mon</TH><TH>Tue</TH><TH>Wed</TH>
<TH>Thu</TH><TH>Fri</TH><TH>Sat</TH></TR>
<TBODY ID="tableBody"></TBODY>
<TR>
<TD COLSPAN=7 STYLE="padding:10px;">
<P>
<button onclick="prevMonth()">上月</button>
<button onclick="nextMonth()">下月</button>
<button onclick="prevDay()">前一天</button>
<button onclick="nextDay()">后一天</button>
</P></TD>
</TR>
</TABLE>
</BODY>
</HTML>

修改说明： #

• 移除了原来的年月下拉选择框，替换为四个功能明确的按钮：上月、下月、前一天、后一天
• 新增了currentDate全局变量来跟踪当前显示的日期，所有切换操作都会更新这个变量后重新渲染日历
• 给当前选中的日期添加了浅蓝色高亮+加粗样式，方便直观识别
• 优化了CSS样式，调整了单元格和按钮的间距，让整体布局更美观舒适
• 自动处理了日期切换的边界情况：比如从1号点击「前一天」会自动跳转到上月最后一天，月末点击「后一天」会跳转到下月第一天

内容的提问来源于stack exchange，提问作者LiN