js实现会跳动的日历效果(完整实例)

2023年5月27日下午3:26 • JavaScript

下面我将详细讲解JS实现会跳动的日历效果的完整攻略。

简介

这是一个使用JavaScript实现会跳动的日历效果的完整示例。该例子展示了如何使用JavaScript和基本的HTML/CSS构建起一个会跳动的日历效果。

步骤

HTML结构

首先我们需要构建页面的HTML结构，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>跳动的日历效果</title>
    <style>
      /* CSS样式 */
    </style>
  </head>
  <body>
    <div class="calendar">
      <div class="calendar__header">
        <a href="#" class="calendar__prev">&#9664;</a>
        <h2 class="calendar__title">2019年11月</h2>
        <a href="#" class="calendar__next">&#9654;</a>
      </div>
      <table>
        <thead>
          <tr>
            <th>日</th>
            <th>一</th>
            <th>二</th>
            <th>三</th>
            <th>四</th>
            <th>五</th>
            <th>六</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </body>
</html>

CSS样式

接下来，我们需要设置一下页面的CSS样式，代码如下：

html, body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.calendar {
  margin: 20px auto;
  width: 500px;
}

.calendar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #3c3c3c;
  color: #fff;
  padding: 10px;
}

.calendar__title {
  margin: 0;
}

.calendar__prev,
.calendar__next {
  text-decoration: none;
  color: #fff;
  font-size: 24px;
  line-height: 1;
}

.calendar__prev:hover,
.calendar__next:hover {
  text-decoration: underline;
}

table {
  font-size: 14px;
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: #3c3c3c;
  color: #fff;
  font-weight: bold;
  padding: 10px 0;
  text-align: center;
}

td {
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
}

td.inactive {
  color: #ccc;
}

td.today {
  background-color: #3c3c3c;
  color: #fff;
}

JavaScript

最后，我们需要使用JavaScript来实现会跳动的日历效果。代码如下：

const calendar = document.querySelector('.calendar');
const calendarTitle = calendar.querySelector('.calendar__title');
const calendarBody = calendar.querySelector('tbody');
const prevBtn = calendar.querySelector('.calendar__prev');
const nextBtn = calendar.querySelector('.calendar__next');

let date = new Date();
let month = date.getMonth();
let year = date.getFullYear();

// 定义一个保存日期数组的变量
let days = [];

function generateCalendarDays() {
  // 清空日期数组
  days = [];

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

  // 获取当月的第一天是星期几
  const firstDayOfMonth = new Date(year, month, 1).getDay();

  // 获取上一个月的天数
  const daysInPrevMonth = new Date(year, month, 0).getDate();

  // 计算日期数组包含的日期
  for (let i = 1; i < firstDayOfMonth; i++) {
    days.unshift(daysInPrevMonth - i + 1);
  }
  for (let i = 1; i <= daysInMonth; i++) {
    days.push(i);
  }
  for (let i = 1; i <= 42 - days.length; i++) {
    days.push(i);
  }

  // 根据日期数组动态生成日历
  let html = '';
  days.forEach((day, index) => {
    if (index % 7 === 0) {
      html += '<tr>';
    }
    html += `<td class="${month !== date.getMonth() ? 'inactive' : ''} ${day === date.getDate() && month === date.getMonth() ? 'today' : ''}">${day}</td>`;
    if (index % 7 === 6) {
      html += '</tr>';
    }
  });
  calendarBody.innerHTML = html;

  // 设置日历标题
  calendarTitle.textContent = `${year}年${month + 1}月`;
}

generateCalendarDays();

prevBtn.addEventListener('click', () => {
  month--;
  if (month < 0) {
    month = 11;
    year--;
  }
  generateCalendarDays();
});

nextBtn.addEventListener('click', () => {
  month++;
  if (month > 11) {
    month = 0;
    year++;
  }
  generateCalendarDays();
});

setInterval(() => {
  date = new Date();
  if (date.getMonth() !== month || date.getFullYear() !== year) {
    month = date.getMonth();
    year = date.getFullYear();
    generateCalendarDays();
  } else {
    const today = calendarBody.querySelector('.today');
    if (today) {
      today.classList.remove('today');
    }
    const todayIndex = days.indexOf(date.getDate());
    const todayCell = calendarBody.querySelectorAll('td')[todayIndex];
    todayCell.classList.add('today');
  }
}, 1000);

代码中主要包含以下功能：