HTML+CSS+JavaScript实现简单日历效果

为了让大家更好地理解如何使用HTML、CSS、JavaScript实现简单的日历效果，我将会提供一份详细的攻略。具体过程如下：

第一步：HTML代码

日历的基础是HTML代码，需要我们创建一个像如下的结构：

<div class="calendar">
  <div class="header">
    <button class="prev">&lt;</button>
    <span class="date">February 2021</span>
    <button class="next">&gt;</button>
  </div>
  <table>
    <tr>
      <th>Sun</th>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
      <th>Sat</th>
    </tr>
    <tr>
      <td class="prev-month">31</td>
      <td class="prev-month">1</td>
      <td class="prev-month">2</td>
      <td class="prev-month">3</td>
      <td class="prev-month">4</td>
      <td class="prev-month">5</td>
      <td class="prev-month">6</td>
    </tr>
    <!-- ......... -->
  </table>
</div>

这里的HTML结构包含一个日历 div 的主体和表头。主体包含一个标题 div 和一个 table 作为具体的日历。在这个 table 中，每个 td 表示一个日期，而每个 tr 则表示一个星期。

第二步：CSS的样式

我们需要在CSS样式中加入如下的代码：

.calendar {
  margin: 20px auto;
  font-family: Arial, sans-serif;
  border: 1px solid grey;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
  width: 300px;
  background-color: white;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 5px;
  background-color: #201e1f;
  color: white;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  padding: 5px;
  text-align: center;
}

td {
  height: 25px;
  text-align: center;
  border: 1px solid grey;
  padding: 5px;
}

.prev-month {
  color: grey;
}

.next-month {
  color: grey;
}

这段代码定义了整个日历的外观，包括颜色和表格的样式。

第三步：JavaScript的实现

我们需要加入一些JavaScript代码来完成日历的交互功能。具体实现可以分为三个部分：

获取当前月份的完整数据，并渲染到日历中去。

var date = new Date();
var today = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();

var months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];

var monthAndYear = document.querySelector(".date");
monthAndYear.innerHTML = months[month] + " " + year;

给向前和向后按钮添加事件监听器，并更新日历。

document.querySelector(".prev").addEventListener("click", function () {
  month--;
  if (month < 0) {
    year--;
    month = 11;
  }
  showCalendar(month, year);
});

document.querySelector(".next").addEventListener("click", function () {
  month++;
  if (month > 11) {
    year++;
    month = 0;
  }
  showCalendar(month, year);
});

根据当前月份和年份在日历中展示正确的日期。

function showCalendar(month, year) {
  var firstDay = new Date(year, month, 1);
  var lastDay = new Date(year, month + 1, 0);
  var startingDay = firstDay.getDay();
  var monthLength = lastDay.getDate();

  var monthAndYear = document.querySelector(".date");
  monthAndYear.innerHTML = months[month] + " " + year;

  var calendar = document.querySelector("table tbody");

  calendar.innerHTML = "";

  var date = 1;
  for (var i = 0; i < 6; i++) {
    var row = document.createElement("tr");

    for (var j = 0; j < 7; j++) {
      if (i === 0 && j < startingDay) {
        var cell = document.createElement("td");
        cell.classList.add("prev-month");
        cell.innerHTML = "";
        row.appendChild(cell);
      } else if (date > monthLength) {
        break;
      } else {
        var cell = document.createElement("td");
        cell.innerHTML = date;
        if (date === today && year === new Date().getFullYear() && month === new Date().getMonth()) {
          cell.classList.add("current-day");
        }
        row.appendChild(cell);
        date++;
      }
    }

    calendar.appendChild(row);

    // Code for removing last row if it's empty
    var lastRowEmptyCells = row.querySelectorAll(":empty");
    if (lastRowEmptyCells.length === 7) {
      row.remove();
    }
  }
}

showCalendar(month, year);

整段代码的作用是获取当前日期、月份和年份，渲染月份和年份到标题上，并根据这些数据在日历中展示正确的日期。

示例说明

这是一个基础的日历效果实现，但我们还可以更进一步地添加更多的功能，比如点击日期后展示详情信息等等。这里是一个完整实现日历效果的代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Calendar</title>
    <style>
      .calendar {
        margin: 20px auto;
        font-family: Arial, sans-serif;
        border: 1px solid grey;
        box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
        width: 300px;
        background-color: white;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2px 5px;
        background-color: #201e1f;
        color: white;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th {
        padding: 5px;
        text-align: center;
      }

      td {
        height: 25px;
        text-align: center;
        border: 1px solid grey;
        padding: 5px;
      }

      .prev-month {
        color: grey;
      }

      .next-month {
        color: grey;
      }

      .current-day {
        background-color: #201e1f;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="calendar">
      <div class="header">
        <button class="prev">&lt;</button>
        <span class="date"></span>
        <button class="next">&gt;</button>
      </div>
      <table>
        <thead>
          <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
          </tr>  
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
    <script>
      var date = new Date();
      var today = date.getDate();
      var month = date.getMonth();
      var year = date.getFullYear();

      var months = [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
      ];

      var monthAndYear = document.querySelector(".date");
      monthAndYear.innerHTML = months[month] + " " + year;

      document.querySelector(".prev").addEventListener("click", function () {
        month--;
        if (month < 0) {
          year--;
          month = 11;
        }
        showCalendar(month, year);
      });

      document.querySelector(".next").addEventListener("click", function () {
        month++;
        if (month > 11) {
          year++;
          month = 0;
        }
        showCalendar(month, year);
      });

      function showCalendar(month, year) {
        var firstDay = new Date(year, month, 1);
        var lastDay = new Date(year, month + 1, 0);
        var startingDay = firstDay.getDay();
        var monthLength = lastDay.getDate();

        var monthAndYear = document.querySelector(".date");
        monthAndYear.innerHTML = months[month] + " " + year;

        var calendar = document.querySelector("table tbody");

        calendar.innerHTML = "";

        var date = 1;
        for (var i = 0; i < 6; i++) {
          var row = document.createElement("tr");

          for (var j = 0; j < 7; j++) {
            if (i === 0 && j < startingDay) {
              var cell = document.createElement("td");
              cell.classList.add("prev-month");
              cell.innerHTML = "";
              row.appendChild(cell);
            } else if (date > monthLength) {
              break;
            } else {
              var cell = document.createElement("td");
              cell.innerHTML = date;
              if (date === today && year === new Date().getFullYear() && month === new Date().getMonth()) {
                cell.classList.add("current-day");
                cell.style.cursor = "pointer";

                cell.addEventListener("click", function() {
                    alert("Today's date is: " + months[month] + " " + date + ", " + year + ".");
                })
              }
              row.appendChild(cell);
              date++;
            }
          }

          calendar.appendChild(row);

          // Code for removing last row if it's empty
          var lastRowEmptyCells = row.querySelectorAll(":empty");
          if (lastRowEmptyCells.length === 7) {
            row.remove();
          }
        }
      }

      showCalendar(month, year);
    </script>
  </body>
</html>

这个示例的实现方式和我们前面提到的基础实现方法非常相似，但是加入了点击具体日期展示相关信息的新功能。您可以点击具体的日期，系统会弹出提示框展示日期信息。

总结

这份攻略对于HTML、CSS和JavaScript的使用较为基础，但是已经可以快速的实现一份简单的日历。针对于更加复杂的效果，可以进一步调整代码并加入功能模块。

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

HTML+CSS+JavaScript实现简单日历效果

第一步：HTML代码

第二步：CSS的样式

第三步：JavaScript的实现

示例说明

总结

相关文章