如何用JavaScript实现点击按钮切换前/后日期功能？

嘿，我来帮你搞定这个点击按钮切换日期（星期几）的需求！先看看你现有代码里的几个小问题，然后咱们一步步修改~

现有代码的问题 #

• 每次点击按钮都重新创建new Date()，这样永远只能拿到当前系统日期，没法记录你切换后的日期状态
• days++完全不对哦——days是存储星期名称的数组，不能直接用递增操作，咱们应该操作的是日期对象本身

修改后的完整实现 #

首先补全HTML部分（假设你还没写按钮和显示容器）：

<div id="todayField"></div>
<button onclick="prev()">&lt;</button>
<button onclick="next()">&gt;</button>

然后是修正后的JavaScript代码：

// 把日期变量放在全局，这样切换时能保留状态
let currentDate = new Date();
const dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

// 抽离显示日期的函数，避免重复代码
function updateDayDisplay() {
  document.getElementById("todayField").innerHTML = dayNames[currentDate.getDay()];
}

// 页面加载时先显示当天
updateDayDisplay();

// 切换到下一天
function next() {
  // 给当前日期加1天
  currentDate.setDate(currentDate.getDate() + 1);
  updateDayDisplay();
}

// 切换到前一天
function prev() {
  // 给当前日期减1天
  currentDate.setDate(currentDate.getDate() - 1);
  updateDayDisplay();
}

关键逻辑解释 #

1. 全局日期变量：currentDate放在函数外面，这样每次点击按钮时，都是基于上一次的日期进行加减，而不是重新获取当前系统日期
2. setDate()方法：这个方法可以直接修改日期对象的天数，比如getDate() + 1就是往后推一天，-1就是往前推一天，它会自动处理月份/年份的变化（比如1月31日加1天会变成2月1日）
3. 复用显示函数：把更新页面显示的逻辑单独写成updateDayDisplay()，避免在next()和prev()里重复写相同的代码，后期维护更方便

这样点击<和>按钮时，就能顺畅地切换显示前一天/后一天的星期啦！

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