夏日风日历

2023-12-05 15:11:50

夏日风日历：用 HTML、CSS 和 JS 营造夏季氛围

引言

日历在我们的日常生活中扮演着至关重要的角色，帮助我们跟踪日期、计划活动和管理我们的时间。而夏日风格的日历则为这种实用性增添了一抹亮丽的色彩，将我们带入阳光明媚、充满乐趣的季节。在这篇教程中，我们将探索如何使用 HTML、CSS 和 JavaScript 创建一个这样的日历，让您的网站或应用程序焕发生机。

HTML 结构

我们从构建日历的 HTML 结构开始。我们将使用一个表格元素来组织日期，并使用 <caption> 元素添加标题。以下是 HTML 代码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>夏日风日历</h1>
  <table>
    <caption></caption>
    <thead>
      <tr>
        <th>日</th>
        <th>一</th>
        <th>二</th>
        <th>三</th>
        <th>四</th>
        <th>五</th>
        <th>六</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <script src="script.js"></script>
</body>
</html>

CSS 样式

接下来，我们使用 CSS 为日历添加一些样式。我们使用 Flexbox 来使表格居中对齐，并使用一些基本的样式来格式化标题和日期。以下是 CSS 代码：

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  margin-bottom: 1em;
}

table {
  margin: 0 auto;
  border-collapse: collapse;
}

caption {
  font-size: 1.5em;
  font-weight: bold;
}

th, td {
  width: 3em;
  height: 3em;
  border: 1px solid #ccc;
  text-align: center;
  vertical-align: middle;
}

.today {
  background-color: #ffc0cb;
}

JavaScript 逻辑

现在，我们编写 JavaScript 逻辑来处理日期和时间。我们将使用 jQuery 来创建简单的 UI 样式，并使用 JavaScript 的 Date 对象来获取当前日期和月份。以下是 JavaScript 代码：

$(function() {
  // 获取当前日期和月份
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth();

  // 设置日历标题
  $("<caption>").text(year + " 年 " + (month + 1) + " 月").appendTo("table");

  // 生成日期网格
  for (var i = 0; i < 6; i++) {
    $("<tr>").appendTo("tbody");
    for (var j = 0; j < 7; j++) {
      $("<td>").text(i * 7 + j + 1).appendTo("tr:last");
    }
  }

  // 标记今天
  $("td").filter(function() {
    return $(this).text() == now.getDate();
  }).addClass("today");
});