1. Python技术站首页
  2. css

CSS 制作有弹性的日历表

• css

下面是关于“CSS 制作有弹性的日历表”的完整攻略：

1. 分析需求

首先，我们要明确自己要制作的日历表应该具备哪些功能和特性，比如：

  • 支持显示任意年月的日历
  • 以表格形式呈现，包括日历视图和周视图两种模式
  • 对于当前月份的日期，应该以不同颜色或样式标识出来
  • 可以通过点击日历中的日期实现对应日期的选择和显示

当我们明确了需求之后，就可以开始着手制作了。

2. 准备工作

在开始之前，我们需要准备好以下内容：

  • 一个 HTML 文件，用于搭建页面结构和组件
  • 一个 CSS 文件，用于设置样式和布局
  • 一个 JavaScript 文件，用于实现交互和选择逻辑

3. 搭建页面结构

首先，我们需要在 HTML 文件中搭建好页面结构，包括日历的容器和包含日期的表格。具体结构可以参考代码示例：

<div class="calendar-container">
  <div class="calendar-header">
    <span class="prev-month">&lt;</span>
    <span class="current-month"></span>
    <span class="next-month">&gt;</span>
  </div>
  <table class="calendar-table">
    <thead>
      <tr>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thu</th>
        <th>Fri</th>
        <th>Sat</th>
        <th>Sun</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

在这个页面结构中，我们定义了一个名为“calendar-container”的容器元素，用于包裹整个日历表格和其它组件。日历表格本身是一个 <table> 元素，其中包含一个 <thead> 元素和一个空的 <tbody> 元素。<thead> 用于放置表头信息，而<tbody>通过 JavaScript 脚本来动态生成日期的行和列。

4. 设置样式和布局

接下来，我们需要通过 CSS 文件来设置日历表的样式和布局。具体可以参考以下代码示例：

.calendar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-family: Arial, sans-serif;
}

.calendar-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
}

.current-month {
  flex: 1;
  text-align: center;
}

.calendar-table {
  border-collapse: collapse;
  margin-top: 10px;
  width: 100%;
}

.calendar-table th {
  padding: 10px;
  text-align: center;
}

.calendar-table td {
  padding: 5px;
  text-align: center;
  vertical-align: middle;
}

.calendar-table td.current-month {
  background-color: #eee;
}

.calendar-table td.clicked {
  background-color: #ccc;
}

在这个样式文件中，我们设置了日历表格的容器和其它组件的样式，以及日期表格的边框和字体等样式。特别地，我们为当前月份的日期单独设置了背景颜色，以及对于已经被点击过的日期也设置了一个灰色背景。

5. 实现交互和选择

最后，我们需要通过 JavaScript 文件来实现日历表格的交互和日期选择功能。具体可参考以下代码示例：

let currentMonthIndex = new Date().getMonth();
let currentYear = new Date().getFullYear();

function renderCalendar(month, year) {
  let startDate = new Date(year, month, 1);
  let endDate = new Date(year, month + 1, 0);
  let daysInMonth = endDate.getDate();

  let tbody = document.querySelector('.calendar-table tbody');
  tbody.innerHTML = '';

  for (let i = 0; i < 6; i++) {
    let tr = document.createElement('tr');

    for (let j = 0; j < 7; j++) {
      let td = document.createElement('td');
      let day = i * 7 + j + 1 - startDate.getDay();

      if (day > 0 && day <= daysInMonth) {
        td.textContent = day;
        td.classList.add('current-month');

        if (j == 0 || j == 6) {
          td.classList.add('weekend');
        }

        tr.appendChild(td);
      } else {
        tr.appendChild(document.createElement('td'));
      }
    }

    tbody.appendChild(tr);
  }

  let currentDateCells = document.querySelectorAll(`.calendar-table td.current-month`);
  currentDateCells.forEach((cell) => {
    cell.addEventListener('click', (event) => {
      currentDateCells.forEach((c) => {
        c.classList.remove('clicked');
      });
      event.target.classList.add('clicked');
    });
  });

  let currentMonth = document.querySelector('.current-month');
  currentMonth.textContent = `${year} - ${startDate.toLocaleString('default', { month: 'long' })}`;
}

renderCalendar(currentMonthIndex, currentYear);

let prevMonth = document.querySelector('.prev-month');
prevMonth.addEventListener('click', () => {
  currentMonthIndex -= 1;
  if (currentMonthIndex < 0) {
    currentMonthIndex = 11;
    currentYear -= 1;
  }
  renderCalendar(currentMonthIndex, currentYear);
});

let nextMonth = document.querySelector('.next-month');
nextMonth.addEventListener('click', () => {
  currentMonthIndex += 1;
  if (currentMonthIndex > 11) {
    currentMonthIndex = 0;
    currentYear += 1;
  }
  renderCalendar(currentMonthIndex, currentYear);
});

在这个 JavaScript 脚本中，我们定义了一个名为“renderCalendar”的函数，用于动态生成日期表格并添加选择逻辑。同时，我们也定义了一些事件监听器，用于实现通过左右箭头来切换不同月份的日历。具体实现细节可以详见代码注释。

6. 示例说明

为了更好地理解和实践上述攻略，下面我将为您演示两个具体的实例。

示例1：日历表的基本显示和交互

在这个示例中，我们先建立好一个空的 HTML 文件和 CSS、JS 文件，并按照上述攻略进行搭建和编写。同时，我们为网页添加一个标题，用于说明页面的用途。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>弹性日历表 DEMO1</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="calendar-container">
    <div class="calendar-header">
      <span class="prev-month">&lt;</span>
      <span class="current-month"></span>
      <span class="next-month">&gt;</span>
    </div>
    <table class="calendar-table">
      <thead>
        <tr>
          <th>Mon</th>
          <th>Tue</th>
          <th>Wed</th>
          <th>Thu</th>
          <th>Fri</th>
          <th>Sat</th>
          <th>Sun</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <script src="script.js"></script>
</body>
</html>

.calendar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-family: Arial, sans-serif;
}

.calendar-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
}

.current-month {
  flex: 1;
  text-align: center;
}

.calendar-table {
  border-collapse: collapse;
  margin-top: 10px;
  width: 100%;
}

.calendar-table th {
  padding: 10px;
  text-align: center;
}

.calendar-table td {
  padding: 5px;
  text-align: center;
  vertical-align: middle;
}

.calendar-table td.current-month {
  background-color: #eee;
}

.calendar-table td.clicked {
  background-color: #ccc;
}

let currentMonthIndex = new Date().getMonth();
let currentYear = new Date().getFullYear();

function renderCalendar(month, year) {
  let startDate = new Date(year, month, 1);
  let endDate = new Date(year, month + 1, 0);
  let daysInMonth = endDate.getDate();

  let tbody = document.querySelector('.calendar-table tbody');
  tbody.innerHTML = '';

  for (let i = 0; i < 6; i++) {
    let tr = document.createElement('tr');

    for (let j = 0; j < 7; j++) {
      let td = document.createElement('td');
      let day = i * 7 + j + 1 - startDate.getDay();

      if (day > 0 && day <= daysInMonth) {
        td.textContent = day;
        td.classList.add('current-month');

        if (j == 0 || j == 6) {
          td.classList.add('weekend');
        }

        tr.appendChild(td);
      } else {
        tr.appendChild(document.createElement('td'));
      }
    }

    tbody.appendChild(tr);
  }

  let currentDateCells = document.querySelectorAll(`.calendar-table td.current-month`);
  currentDateCells.forEach((cell) => {
    cell.addEventListener('click', (event) => {
      currentDateCells.forEach((c) => {
        c.classList.remove('clicked');
      });
      event.target.classList.add('clicked');
    });
  });

  let currentMonth = document.querySelector('.current-month');
  currentMonth.textContent = `${year} - ${startDate.toLocaleString('default', { month: 'long' })}`;
}

renderCalendar(currentMonthIndex, currentYear);

let prevMonth = document.querySelector('.prev-month');
prevMonth.addEventListener('click', () => {
  currentMonthIndex -= 1;
  if (currentMonthIndex < 0) {
    currentMonthIndex = 11;
    currentYear -= 1;
  }
  renderCalendar(currentMonthIndex, currentYear);
});

let nextMonth = document.querySelector('.next-month');
nextMonth.addEventListener('click', () => {
  currentMonthIndex += 1;
  if (currentMonthIndex > 11) {
    currentMonthIndex = 0;
    currentYear += 1;
  }
  renderCalendar(currentMonthIndex, currentYear);
});

在浏览器中打开此 HTML 文件，即可看到呈现日历的页面。同时还可以通过左右箭头切换不同月份的日历，并且点击任意日期单元格后，该单元格会以灰色背景标识为已选择状态。

示例2：添加周视图模式

在这个示例中，我们在上一个示例的基础上，增加了一个名为“week-view”的按钮，并为其添加了一个“点击切换至周视图”的监听事件。同时，我们还要修改一些 CSS 样式，以便能够支持周视图模式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>弹性日历表 DEMO2</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="calendar-container">
    <div class="calendar-header">
      <span class="prev-month">&lt;</span>
      <span class="current-month"></span>
      <span class="next-month">&gt;</span>
      <button class="week-view">周视图</button>
    </div>
    <table class="calendar-table">
      <thead>
        <tr>
          <th>Mon</th>
          <th>Tue</th>
          <th>Wed</th>
          <th>Thu</th>
          <th>Fri</th>
          <th>Sat</th>
          <th>Sun</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <script src="script.js"></script>
</body>
</html>

.calendar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-family: Arial, sans-serif;
}

.calendar-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
}

.current-month {
  flex: 1;
  text-align: center;
}

.calendar-table,
.calendar-table-week {
  border-collapse: collapse;
  margin-top: 10px;
  width: 100%;
}

.calendar-table th,
.calendar-table-week th {
  padding: 10px;
  text-align: center;
}

.calendar-table td,
.calendar-table-week td {
  padding: 5px;
  text-align: center;
  vertical-align: middle;
}

.calendar-table td.current-month,
.calendar-table-week td.current-month {
  background-color: #eee;
}

.calendar-table td.clicked,
.calendar-table-week td.clicked {
  background-color: #ccc;
}

.calendar-table-week tbody {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.calendar-table-week tbody tr {
  flex: 1;
}

```javascript
let currentMonthIndex = new Date().getMonth();
let currentYear = new Date().getFullYear();
let isWeekView = false;

function renderCalendar(month, year) {
let startDate = new Date(year, month, 1);
let endDate = new Date(year, month + 1, 0);
let daysInMonth = endDate.getDate();

if (isWeekView) {
startDate = new Date(startDate.getTime() - startDate.getDay() * 24 * 60 * 60 * 1000);
endDate = new Date(startDate.getTime() + 6 * 24 * 60 * 60 * 1000);
}

let tbody = document.querySelector('.calendar-table tbody');
tbody.innerHTML = '';

if (isWeekView) {
let tr = document.createElement('tr');
for (let i = 0; i < 7; i++) {
let td = document.createElement('td');
td.textContent = ${startDate.getDate() + i} ${startDate.toLocaleString('default', { month: 'long' })};
td.classList.add('current-month');
if (i == 0 || i == 6) {
td.classList.add('weekend');
}
tr.appendChild(td);
}
tbody.appendChild(tr);
} else {
for (let i = 0; i < 6; i++) {
let tr = document.createElement('tr');
for (let j = 0; j < 7; j++) {
let td = document.createElement('td');
let day = i * 7 + j + 1 - startDate.getDay();

    if (day > 0 && day <= daysInMonth) {
      td.textContent = day;
      td.classList.add('current-month');

      if (j == 0 || j == 6) {
        td.classList.add('weekend');
      }

      tr.appendChild(td);
    } else {
      tr.appendChild(document.createElement('td'));
    }
  }
  tbody.appendChild(tr);
}

}

let currentDateCells = document.querySelectorAll(.calendar-table td.current-month);
currentDateCells.forEach((cell) => {
cell.addEventListener('click', (event) => {
currentDateCells.forEach((c) => {
c.classList.remove('clicked');
});
event.target.classList.add('clicked');
});
});

let currentMonth = document.querySelector('.current-month');
if (isWeekView) {
let startOfWeek = new Date(startDate.getTime());
let endOfWeek = new Date(endDate.getTime());
if (startOfWeek.getMonth() !== endOfWeek.getMonth()) {
currentMonth.textContent = ${startOfWeek.toLocaleString('default', { month: 'short' })} ${startOfWeek.getDate()} - ${endOfWeek.toLocaleString('default', { month: 'short' })} ${endOfWeek.getDate()};
} else {
currentMonth.textContent = ${startOfWeek.toLocaleString('default', { month: 'short' })} ${startOfWeek.getDate()} - ${endOfWeek.getDate()};
}
} else {
currentMonth.textContent = ${year} - ${startDate.toLocaleString('default', { month: 'long' })};

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS 制作有弹性的日历表 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 响应式WEB设计学习(3)—如何改善移动设备网页的性能

    针对你提出的问题，在这里我将帮助你详细讲解“响应式WEB设计学习(3)—如何改善移动设备网页的性能”的完整攻略。这篇文章将分为三个部分：前言，改善性能的攻略和示例说明。 前言： 随着移动设备的普及和移动互联网的发展，移动端的用户越来越多。在移动端上打开一个网站，如果页面不仅加载速度慢，页面还很大，那么体验就会非常糟糕。因此，改善移动设备网页的性能变得尤为重要…

    css 2023年6月10日
    00

  • 详解CSS3选择器:nth-child和:nth-of-type之间的差异

    标题：详解CSS3选择器:nth-child和:nth-of-type之间的差异 1. 了解选择器 CSS选择器是一种用来选择HTML或XML文档中一个或多个元素的方式。它们基于匹配元素的名称、类型、属性、层级关系等。CSS3新增了许多新的选择器，包括:nth-child和:nth-of-type两个选择器，它们都可以根据元素在其父元素中的位置选择元素。 2…

    css 2023年6月9日
    00

  • HTML如何引用CSS？

    链接外部样式表 在<head>标签内，使用<link>标签将外部CSS文件链接到HTML文件。如下所示： <head> <link rel="stylesheet" type="text/css" href="style.css"> </head…

    Web开发基础 2023年3月20日
    00

  • JS实现鼠标滑过链接改变网页背景颜色的方法

    要实现鼠标滑过链接改变网页背景颜色，可以通过JavaScript来实现。 首先，在HTML文件中添加一个链接，并给它一个id，例如： <a href="#" id="myLink">点击我</a> 在JavaScript文件中，获取这个链接的元素，并为它添加鼠标滑过事件监听器，例如： const…

    css 2023年6月9日
    00

  • 原生javascript实现无间缝滚动示例

    下面我将详细讲解如何用原生JavaScript实现无间缝滚动的攻略。 步骤一：准备HTML文件结构 首先，我们需要准备一个包含滚动内容的HTML结构。示例结构可以是一组图片，如下所示： <div class="scroll-wrapper"> <ul class="scroll-content"&gt…

    css 2023年6月10日
    00

  • 使用CSS实现outline切换的动画效果

    使用CSS实现outline切换的动画效果是一种常见的布局变换效果。该效果适用于在用户与网站互动时添加一些视觉反馈，比如悬停在链接上时添加一个虚线边框。下面是实现该效果的攻略。 步骤一：HTML结构 要使用CSS实现outline切换的动画效果，首先需要准备HTML结构。下面是一个简单的示例： <!– 定义一个链接 –> <a href…

    css 2023年6月10日
    00

  • 语义化的网页 XHTML语义化标记

    下面是对于“语义化的网页 XHTML语义化标记”的完整攻略： 什么是语义化的网页？ 语义化的网页是指使用有意义、具有良好结构的HTML标记，以便于机器和人能够理解其中的内容。它能使页面结构更加清晰、易于维护，同时还能带来更好的SEO表现和更好的用户体验。 XHTML语义化标记的重要性 使用XHTML语义化标记能够提升页面的可读性和可访问性，对于搜索引擎爬虫更…

    css 2023年6月9日
    00

  • 使用font-face改变字体即加载外部字体

    使用@font-face规则可以在网页中加载外部字体，从而改变网页中的文本字体，并且让文本在任何设备上都显示一致。以下是使用@font-face规则加载外部字体的完整攻略： 步骤一：选择字体文件 选择适合自己网站风格的字体文件，并确保其版权合法。常见的字体类型有TTF、OTF、WOFF等。 步骤二：在样式表中声明@font-face规则 在网站样式表中声明@…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部