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日

相关文章

  • box-shadow和drop-shadow实现不规则投影实例代码

    首先我们来了解一下box-shadow和drop-shadow两种方式实现阴影的不同之处： box-shadow属性是在目标元素的边框外侧形成一个矩形的投影效果。 drop-shadow属性是在目标元素和背景之间产生一个投影效果，投影效果是会根据目标元素的不规则形状进行调整的。 接下来我们分别来看一下如何使用box-shadow和drop-shadow实现不…

    css 2023年6月9日
    00

  • css实现文字垂直居中的代码第1/2页

    当需要将文字垂直对齐到容器中心时，可以使用CSS的flexbox布局或者行高+伪元素的方式实现。下面分别对这两种方法进行说明。 方法一：flexbox布局 Flexbox布局允许我们通过align-items属性将元素的内容垂直居中。具体实现方式如下： 创建一个容器元素，并设置display为flex以启用flexbox布局。 通过align-items属性…

    css 2023年6月9日
    00

  • 在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)

    在CSS中，可以通过使用伪类:hover实现在鼠标移动到元素上对其进行特定效果的显示。但是如果要通过鼠标移动来控制页面元素的效果，则需要使用一些JavaScript技巧。接下来，我会详细讲解在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果的完整攻略，包括过程、步骤、代码示例等。 步骤 步骤1：定义CSS样式 首先，在HTML中定义需要实现鼠标移动控制…

    css 2023年6月9日
    00

  • css中filter属性和backdrop-filter的应用与区别详解

    CSS中filter属性和backdrop-filter的应用与区别详解 介绍 CSS中的filter属性和backdrop-filter属性可以用来修改元素的视觉效果。filter属性可以用于元素本身，而backdrop-filter属性用于元素背景。本文将详细介绍它们的使用方法。 filter属性 filter属性是CSS3中的一个属性，它能让你对元素的…

    css 2023年6月10日
    00

  • JavaScript让网页出现渐隐渐显背景颜色的方法

    首先，在HTML文件中创建一个简单的页面结构，包含一个作为背景的div元素。例如： <!DOCTYPE html> <html> <head> <title>渐隐渐显背景颜色</title> <style> body { margin: 0; padding: 0; overflow: …

    css 2023年6月9日
    00

  • php基于openssl的rsa加密解密示例

    以下是基于OpenSSL的RSA加密解密示例攻略。 简介 RSA是一种非对称加密算法，可以实现数据加密与解密。OpenSSL是一个常用的加密算法库，内置了RSA算法，可以用PHP来调用。 准备工作 首先需要安装OpenSSL扩展，可以在php.ini中开启或者通过命令行启用。可以使用 openssl_get_cipher_methods()函数来检查Open…

    css 2023年6月10日
    00

  • javascript 线性渐变三

    JavaScript线性渐变是指在两个不同颜色之间呈现平滑过渡的效果。在本次攻略中，我们将介绍如何使用JavaScript实现线性渐变。以下是具体步骤。 步骤一：创建渐变 要使用JavaScript实现渐变，我们需要先创建一个Canvas元素。然后使用createLinearGradient()方法创建渐变。该方法需要四个参数，分别是起始点和结束点的横纵坐标…

    css 2023年6月10日
    00

  • vue脚手架中配置Sass的方法

    下面是关于在Vue脚手架中配置Sass的完整攻略。 安装sass-loader和node-sass 要在Vue脚手架中使用Sass，需要先安装sass-loader和node-sass。打开终端进入项目根目录，输入以下命令进行安装： npm install sass-loader node-sass –save-dev 配置Vue项目 在项目根目录中创建v…

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