技术咨询：如何实现点击箭头切换日期前后的JavaScript代码

Got it, let's get this date navigation feature working for you! The core idea is to track the currently displayed date, create a reusable function to render that date to your DOM, then add click events to your arrows and date elements to adjust the date and refresh the display.

Step 1: Tweak Your HTML (For Clarity) #

First, let's add IDs to your arrow icons so we can easily target them, and wrap your date elements in a container to make it easy to add a click event to the entire date display:

<div class="full-date">
  <i id="prev-arrow" class='fas fa-angle-left'></i>
  <div id="date-container">
    <div id="month-today"></div>
    <div id="day-today"></div>
    <div id="date-today"></div>
  </div>
  <i id="next-arrow" class='fas fa-angle-right'></i>
</div>

Step 2: Rewrite Your JavaScript Logic #

We'll break this into reusable functions to keep things clean and maintainable:

// Track the currently displayed date
let currentDate = new Date();

// Define your date-related arrays (fixed the typo: 22th → 22nd)
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const daysOfWeek = ["Sunday", "Monday","Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const dateSuffixes = ["0","1st", "2nd","3rd","4th","5th","6th","7th","8th","9th","10th","11th","12th","13th", "14th", "15th", "16th", "17th", "18th", "19th", "20th", "21st", "22nd", "23rd", "24th", "25th", "26th", "27th", "28th", "29th", "30th", "31st"];

// Reusable function to render the current date to the DOM
function renderCurrentDate() {
  const year = currentDate.getFullYear();
  const monthIndex = currentDate.getMonth();
  const dayIndex = currentDate.getDay();
  const dayOfMonth = currentDate.getDate();

  // Update the month-today element with the full date string (matches your original code)
  document.getElementById("month-today").textContent = `${daysOfWeek[dayIndex]}, ${dateSuffixes[dayOfMonth]} of ${months[monthIndex]} ${year}`;

  // Optional: If you want to populate day-today and date-today separately, uncomment below
  // document.getElementById("day-today").textContent = daysOfWeek[dayIndex];
  // document.getElementById("date-today").textContent = `${dateSuffixes[dayOfMonth]} of ${months[monthIndex]} ${year}`;
}

// Function to switch to the previous day
function goToPreviousDay() {
  currentDate.setDate(currentDate.getDate() - 1);
  renderCurrentDate();
}

// Function to switch to the next day
function goToNextDay() {
  currentDate.setDate(currentDate.getDate() + 1);
  renderCurrentDate();
}

// Initialize the display with today's date
renderCurrentDate();

// Add click events to the arrows
document.getElementById("prev-arrow").addEventListener("click", goToPreviousDay);
document.getElementById("next-arrow").addEventListener("click", goToNextDay);

// Add click event to the date container (matches your requirement: click date to switch to previous day)
document.getElementById("date-container").addEventListener("click", goToPreviousDay);

// If you meant clicking the date should switch to the next day instead, replace the line above with:
// document.getElementById("date-container").addEventListener("click", goToNextDay);

// Bonus: If you wanted clicking the date to jump back to today, add this function and use it instead
// function goToToday() {
//   currentDate = new Date();
//   renderCurrentDate();
// }
// document.getElementById("date-container").addEventListener("click", goToToday);

Key Notes #

• Date Handling: Using setDate() is perfect here because it automatically handles month/year rollovers (e.g., clicking previous on January 1st will take you to December 31st of the previous year).
• Reusable Render Function: By wrapping the DOM update logic in renderCurrentDate(), we avoid repeating code every time the date changes.
• Fixed Typo: I corrected 22th to 22nd in your date suffixes array — that's a common grammar mistake!
• Flexible Date Click Logic: I included options for the date container click event to match different interpretations of your requirement. Pick the one that fits your needs best.

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