JavaScript实现简单的日历效果

下面是具体的攻略。

1. 理清需求和思路

在实现日历效果时，我们需要注意以下几个点：

展示一个月的日历，包含每一天的日期和星期几；
给用户提供切换月份的功能；
当天的日期需要特殊标识。

为了实现日历效果，我们需要先通过 JavaScript 获取到当前的年份和月份，然后计算出这个月有多少天，以及这个月的第一天是星期几。最后，我们通过循环渲染 HTML 标签来展现日历。

2. 获取当前时间并计算相关信息

获取当前日期和月份的 JavaScript 代码如下：

const now = new Date();
const year = now.getFullYear();  // 获取年份
const month = now.getMonth() + 1;  // 获取月份，注意月份是从0开始计算的，需要加1

接下来，我们需要计算出这个月有多少天：

const daysInMonth = new Date(year, month, 0).getDate();  // 获取该月天数

我们还需要获取该月的第一天是星期几。为了方便计算，我们可以先计算出该月的第一天的日期对象，然后通过 getDay() 方法获取具体是星期几：

const firstDayOfMonth = new Date(`${year}-${month}-01`);  // 获取该月第一天的日期对象
const firstDayOfWeek = firstDayOfMonth.getDay();  // 获取该月第一天是星期几，0代表星期天，1代表星期一，以此类推。

3. 渲染 HTML 标签

拿到了月份的天数和该月的第一天是星期几之后，我们可以按照一定的规律渲染 HTML 标签，展示日历。以下是一个示例代码：

const container = document.getElementById('calendar');  // 获取日历容器
let calendarHtml = '';

for (let i = 0; i < 7; i++) {
  // 输出星期几
  calendarHtml += '<div class="calendar-day calendar-header">';
  calendarHtml += ['日', '一', '二', '三', '四', '五', '六'][i];
  calendarHtml += '</div>';
}

for (let i = 0; i < 42; i++) {
  if (i % 7 == 0) {
    // 每个星期的第一天，开启一个新的行
    calendarHtml += '<div class="calendar-row">';
  }

  if (i < firstDayOfWeek || i >= firstDayOfWeek + daysInMonth) {
    // 日期不存在于该月份，用空白代替
    calendarHtml += '<div class="calendar-day"></div>';
  } else {
    const day = i - firstDayOfWeek + 1;
    const today = `${year}-${month}-${day}` === new Date().toISOString().substr(0, 10);

    calendarHtml += `<div class="calendar-day ${today ? 'today' : ''}">${day}</div>`;
  }

  if (i % 7 == 6) {
    // 每个星期的最后一天，结束当前行
    calendarHtml += '</div>';
  }
}

container.innerHTML = calendarHtml;  // 输出日历

以上代码将会按照如下方式渲染日历：

 Su Mo Tu We Th Fr Sa 
                   1 
  2  3  4  5  6  7  8 
  9 10 11 12 13 14 15 
 16 17 18 19 20 21 22 
 23 24 25 26 27 28 29 
 30 31

4. 添加切换月份的功能

为了方便用户查看不同月份的日历，我们可以添加切换月份的功能。以下是一个简单的示例：

const nextBtn = document.getElementById('next-btn');
const prevBtn = document.getElementById('prev-btn');

nextBtn.addEventListener('click', () => {
  const nextPageDate = new Date(`${year}-${month + 1}-1`);
  location.href = `?year=${nextPageDate.getFullYear()}&month=${nextPageDate.getMonth() + 1}`;
});

prevBtn.addEventListener('click', () => {
  const prevPageDate = new Date(`${year}-${month}-1`) - 24 * 60 * 60 * 1000;
  location.href = `?year=${prevPageDate.getFullYear()}&month=${prevPageDate.getMonth() + 1}`;
});

该示例代码会为日历中的 next-btn 和 prev-btn 两个按钮添加事件监听器，当用户点击按钮时会跳转到上一个月或下一个月的日历页面。

5. 运行示例程序

以下是一个完整的示例程序，你可以直接运行并查看日历效果，也可以引用其中的代码来实现自己的需求。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>日历示例</title>
    <style>
      .calendar {
        display: flex;
        flex-wrap: wrap;
        width: 280px;
      }

      .calendar-header {
        flex: 1 0 0;
        text-align: center;
        color: #aaa;
        font-size: 16px;
        padding: 10px;
      }

      .calendar-day {
        flex: 1 0 0;
        text-align: center;
        font-size: 20px;
        padding: 10px;
      }

      .calendar-day.today {
        background: #eee;
        font-weight: bold;
      }

      .calendar-row {
        display: flex;
        flex-wrap: wrap;
      }

      button {
        margin: 10px;
        font-size: 18px;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <div class="calendar" id="calendar"></div>
    <div>
      <button id="prev-btn">上一个月</button>
      <button id="next-btn">下一个月</button>
    </div>
    <script>
      const queryParams = new URLSearchParams(window.location.search);
      const year = parseInt(queryParams.get('year')) || new Date().getFullYear();
      const month = parseInt(queryParams.get('month')) || new Date().getMonth() + 1;

      const daysInMonth = new Date(year, month, 0).getDate();
      const firstDayOfMonth = new Date(`${year}-${month}-01`);
      const firstDayOfWeek = firstDayOfMonth.getDay();

      const container = document.getElementById('calendar');
      let calendarHtml = '';

      for (let i = 0; i < 7; i++) {
        // 输出星期几
        calendarHtml += '<div class="calendar-day calendar-header">';
        calendarHtml += ['日', '一', '二', '三', '四', '五', '六'][i];
        calendarHtml += '</div>';
      }

      for (let i = 0; i < 42; i++) {
        if (i % 7 == 0) {
          // 每个星期的第一天，开启一个新的行
          calendarHtml += '<div class="calendar-row">';
        }

        if (i < firstDayOfWeek || i >= firstDayOfWeek + daysInMonth) {
          // 日期不存在于该月份，用空白代替
          calendarHtml += '<div class="calendar-day"></div>';
        } else {
          const day = i - firstDayOfWeek + 1;
          const today = `${year}-${month}-${day}` === new Date().toISOString().substr(0, 10);

          calendarHtml += `<div class="calendar-day ${today ? 'today' : ''}">${day}</div>`;
        }

        if (i % 7 == 6) {
          // 每个星期的最后一天，结束当前行
          calendarHtml += '</div>';
        }
      }

      container.innerHTML = calendarHtml;

      const nextBtn = document.getElementById('next-btn');
      const prevBtn = document.getElementById('prev-btn');

      nextBtn.addEventListener('click', () => {
        const nextPageDate = new Date(`${year}-${month + 1}-1`);
        location.href = `?year=${nextPageDate.getFullYear()}&month=${nextPageDate.getMonth() + 1}`;
      });

      prevBtn.addEventListener('click', () => {
        const prevPageDate = +new Date(`${year}-${month}-1`) - 24 * 60 * 60 * 1000;
        location.href = `?year=${new Date(prevPageDate).getFullYear()}&month=${new Date(prevPageDate).getMonth() + 1}`;
      });
    </script>
  </body>
</html>

运行以上代码，你会看到一个基于 JavaScript 实现的简单日历效果。你可以通过左右箭头按钮来切换月份，也可以通过修改 URL 参数直接跳转到指定月份的日历。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现简单的日历效果 - Python技术站