使用 HTML和 CSS 编写 一个 日历界面

已于 2024-07-26 10:12:52 修改
阅读量3.6k 收藏 3
点赞数 6
文章标签： html css 前端
于 2024-07-26 10:11:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74972192/article/details/140708324
版权

在这篇文章中，我将向大家展示如何使用HTML和CSS创建一个简单的日历界面。这个日历界面可以显示两个连续的月份，并高亮显示今天的日期。

步骤一：创建HTML结构

首先，我们需要创建一个基本的HTML结构。我们将使用<div>元素来创建日历的容器，并使用<div>元素来表示每个月的日历。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>日历界面</title>
    <style>
        .calendar-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px;
        }
        .calendar {
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
        }
        .calendar-header {
            text-align: center;
            font-size: 20px;
            margin-bottom: 10px;
        }
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }
        .calendar-cell {
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #ccc;
        }
        .today {
            background-color: #00f;
            color: #fff;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="calendar-container">
        <div class="calendar">
            <div class="calendar-header">2024年7月</div>
            <div class="calendar-grid">
                <div class="calendar-cell">日</div>
                <div class="calendar-cell">一</div>
                <div class="calendar-cell">二</div>
                <div class="calendar-cell">三</div>
                <div class="calendar-cell">四</div>
                <div class="calendar-cell">五</div>
                <div class="calendar-cell">六</div>
                <!-- 这里填充7月的日期 -->
                <div class="calendar-cell">30</div>
                <div class="calendar-cell">1</div>
                <div class="calendar-cell">2</div>
                <div class="calendar-cell">3</div>
                <div class="calendar-cell">4</div>
                <div class="calendar-cell">5</div>
                <div class="calendar-cell">6</div>
                <div class="calendar-cell">7</div>
                <div class="calendar-cell">8</div>
                <div class="calendar-cell">9</div>
                <div class="calendar-cell">10</div>
                <div class="calendar-cell">11</div>
                <div class="calendar-cell">12</div>
                <div class="calendar-cell">13</div>
                <div class="calendar-cell">14</div>
                <div class="calendar-cell">15</div>
                <div class="calendar-cell">16</div>
                <div class="calendar-cell">17</div>
                <div class="calendar-cell">18</div>
                <div class="calendar-cell">19</div>
                <div class="calendar-cell">20</div>
                <div class="calendar-cell">21</div>
                <div class="calendar-cell">22</div>
                <div class="calendar-cell">23</div>
                <div class="calendar-cell">24</div>
                <div class="calendar-cell">25</div>
                <div class="calendar-cell">26</div>
                <div class="calendar-cell">27</div>
                <div class="calendar-cell">28</div>
                <div class="calendar-cell">29</div>
                <div class="calendar-cell">30</div>
                <div class="calendar-cell">31</div>
            </div>
        </div>
        <div class="calendar">
            <div class="calendar-header">2024年8月</div>
            <div class="calendar-grid">
                <div class="calendar-cell">日</div>
                <div class="calendar-cell">一</div>
                <div class="calendar-cell">二</div>
                <div class="calendar-cell">三</div>
                <div class="calendar-cell">四</div>
                <div class="calendar-cell">五</div>
                <div class="calendar-cell">六</div>
                <!-- 这里填充8月的日期 -->
                <div class="calendar-cell">1</div>
                <div class="calendar-cell">2</div>
                <div class="calendar-cell">3</div>
                <div class="calendar-cell">4</div>
                <div class="calendar-cell">5</div>
                <div class="calendar-cell">6</div>
                <div class="calendar-cell">7</div>
                <div class="calendar-cell">8</div>
                <div class="calendar-cell">9</div>
                <div class="calendar-cell">10</div>
                <div class="calendar-cell">11</div>
                <div class="calendar-cell">12</div>
                <div class="calendar-cell">13</div>
                <div class="calendar-cell">14</div>
                <div class="calendar-cell">15</div>
                <div class="calendar-cell">16</div>
                <div class="calendar-cell">17</div>
                <div class="calendar-cell">18</div>
                <div class="calendar-cell">19</div>
                <div class="calendar-cell">20</div>
                <div class="calendar-cell">21</div>
                <div class="calendar-cell">22</div>
                <div class="calendar-cell">23</div>
                <div class="calendar-cell">24</div>
                <div class="calendar-cell">25</div>
                <div class="calendar-cell">26</div>
                <div class="calendar-cell">27</div>
                <div class="calendar-cell">28</div>
                <div class="calendar-cell">29</div>
                <div class="calendar-cell">30</div>
                <div class="calendar-cell">31</div>
            </div>
        </div>
    </div>
    <script>
        // 获取当前日期
        const today = new Date();
        const todayDate = today.getDate();
        const todayMonth = today.getMonth() + 1; // 月份从0开始
        const todayYear = today.getFullYear();

        // 高亮显示今天的日期
        const cells = document.querySelectorAll('.calendar-cell');
        cells.forEach(cell => {
            if (parseInt(cell.textContent) === todayDate) {
                cell.classList.add('today');
            }
        });
    </script>
</body>
</html>

代码解析

  1. HTML结构：我们创建了一个包含两个日历的容器，每个日历都有一个标题和一个网格布局，用于显示日期。
  2. CSS样式：我们使用Flexbox布局来对齐日历容器，并使用Grid布局来排列每个月的日期。我们还为今天的日期添加了一个特殊的样式。
  3. JavaScript代码：我们获取当前日期，并在日历中找到对应的日期单元格，然后为其添加一个特殊的CSS类，以高亮显示今天的日期。

步骤二：添加CSS样式

接下来，我们需要添加一些CSS样式来美化日历界面。我们将使用Flexbox来布局日历容器，并使用Grid布局来排列每个月的日期。

<style>
    .calendar-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px;
    }
    .calendar {
        border: 1px solid #ccc;
        margin: 10px;
        padding: 10px;
    }
    .calendar-header {
        text-align: center;
        font-size: 20px;
        margin-bottom: 10px;
    }
    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 5px;
    }
    .calendar-cell {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #ccc;
    }
    .today {
        background-color: #00f;
        color: #fff;
        border-radius: 50%;
    }
</style>

代码解析

  1. .calendar-container：使用Flexbox布局来对齐日历容器。
  2. .calendar：为每个月的日历添加边框、外边距和内边距。
  3. .calendar-header：设置日历标题的文本对齐方式、字体大小和下边距。
  4. .calendar-grid：使用Grid布局来排列每个月的日期，设置每行7个单元格，并添加间距。
  5. .calendar-cell：设置日期

步骤三：使用JavaScript高亮显示今天的日期

最后，我们将使用JavaScript来高亮显示今天的日期。我们将获取当前日期，并在日历中找到对应的日期单元格，然后为其添加一个特殊的CSS类。

<script>
    // 获取当前日期
    const today = new Date();
    const todayDate = today.getDate();
    const todayMonth = today.getMonth() + 1; // 月份从0开始
    const todayYear = today.getFullYear();

    // 高亮显示今天的日期
    const cells = document.querySelectorAll('.calendar-cell');
    cells.forEach(cell => {
        if (parseInt(cell.textContent) === todayDate) {
            cell.classList.add('today');
        }
    });
</script>

代码解析

  1. 获取当前日期：我们使用new Date()获取当前日期，并分别获取日期、月份和年份。
  2. 高亮显示今天的日期：我们使用querySelectorAll选择所有的日期单元格，然后遍历这些单元格，检查其内容是否与今天的日期匹配。如果匹配，则为该单元格添加today类，从而高亮显示。

整体代码

以下是完整的HTML、CSS和JavaScript代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>日历界面</title>
    <style>
        .calendar-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px;
        }
        .calendar {
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
        }
        .calendar-header {
            text-align: center;
            font-size: 20px;
            margin-bottom: 10px;
        }
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }
        .calendar-cell {
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #ccc;
        }
        .today {
            background-color: #00f;
            color: #fff;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="calendar-container">
        <div class="calendar">
            <div class="calendar-header">2024年7月</div>
            <div class="calendar-grid">
                <div class="calendar-cell">日</div>
                <div class="calendar-cell">一</div>
                <div class="calendar-cell">二</div>
                <div class="calendar-cell">三</div>
                <div class="calendar-cell">四</div>
                <div class="calendar-cell">五</div>
                <div class="calendar-cell">六</div>
                <!-- 这里填充7月的日期 -->
                <div class="calendar-cell">30</div>
                <div class="calendar-cell">1</div>
                <div class="calendar-cell">2</div>
                <div class="calendar-cell">3</div>
                <div class="calendar-cell">4</div>
                <div class="calendar-cell">5</div>
                <div class="calendar-cell">6</div>
                <div class="calendar-cell">7</div>
                <div class="calendar-cell">8</div>
                <div class="calendar-cell">9</div>
                <div class="calendar-cell">10</div>
                <div class="calendar-cell">11</div>
                <div class="calendar-cell">12</div>
                <div class="calendar-cell">13</div>
                <div class="calendar-cell">14</div>
                <div class="calendar-cell">15</div>
                <div class="calendar-cell">16</div>
                <div class="calendar-cell">17</div>
                <div class="calendar-cell">18</div>
                <div class="calendar-cell">19</div>
                <div class="calendar-cell">20</div>
                <div class="calendar-cell">21</div>
                <div class="calendar-cell">22</div>
                <div class="calendar-cell">23</div>
                <div class="calendar-cell">24</div>
                <div class="calendar-cell">25</div>
                <div class="calendar-cell">26</div>
                <div class="calendar-cell">27</div>
                <div class="calendar-cell">28</div>
                <div class="calendar-cell">29</div>
                <div class="calendar-cell">30</div>
                <div class="calendar-cell">31</div>
            </div>
        </div>
        <div class="calendar">
            <div class="calendar-header">2024年8月</div>
            <div class="calendar-grid">
                <div class="calendar-cell">日</div>
                <div class="calendar-cell">一</div>
                <div class="calendar-cell">二</div>
                <div class="calendar-cell">三</div>
                <div class="calendar-cell">四</div>
                <div class="calendar-cell">五</div>
                <div class="calendar-cell">六</div>
                <!-- 这里填充8月的日期 -->
                <div class="calendar-cell">1</div>
                <div class="calendar-cell">2</div>
                <div class="calendar-cell">3</div>
                <div class="calendar-cell">4</div>
                <div class="calendar-cell">5</div>
                <div class="calendar-cell">6</div>
                <div class="calendar-cell">7</div>
                <div class="calendar-cell">8</div>
                <div class="calendar-cell">9</div>
                <div class="calendar-cell">10</div>
                <div class="calendar-cell">11</div>
                <div class="calendar-cell">12</div>
                <div class="calendar-cell">13</div>
                <div class="calendar-cell">14</div>
                <div class="calendar-cell">15</div>
                <div class="calendar-cell">16</div>
                <div class="calendar-cell">17</div>
                <div class="calendar-cell">18</div>
                <div class="calendar-cell">19</div>
                <div class="calendar-cell">20</div>
                <div class="calendar-cell">21</div>
                <div class="calendar-cell">22</div>
                <div class="calendar-cell">23</div>
                <div class="calendar-cell">24</div>
                <div class="calendar-cell">25</div>
                <div class="calendar-cell">26</div>
                <div class="calendar-cell">27</div>
                <div class="calendar-cell">28</div>
                <div class="calendar-cell">29</div>
                <div class="calendar-cell">30</div>
                <div class="calendar-cell">31</div>
            </div>
        </div>
    </div>
    <script>
        // 获取当前日期
        const today = new Date();
        const todayDate = today.getDate();
        const todayMonth = today.getMonth() + 1; // 月份从0开始
        const todayYear = today.getFullYear();
 
        // 高亮显示今天的日期
        const cells = document.querySelectorAll('.calendar-cell');
        cells.forEach(cell => {
            if (parseInt(cell.textContent) === todayDate) {
                cell.classList.add('today');
            }
        });
    </script>
</body>
</html>

效果图：

结论

通过以上步骤，我们成功创建了一个简单的日历界面，并高亮显示了今天的日期。你可以根据需要进一步扩展和美化这个日历界面，例如添加月份切换功能、日期选择功能等。希望这篇文章对你有所帮助！

如果你有任何问题或需要进一步的帮助，请随时告诉我。

其他文章推荐

如果你对 Python 编程感兴趣，以下是一些推荐的文章：

  1. 使用 python 创建一个 Web 计算器 (基于Python Flask)-CSDN博客
  2. 使用 Python 创建个人记账应用-CSDN博客
  3. 在 Python 中以 特定格式 打印 所有 ASCII字符-CSDN博客
  4. 使用 pt5 制作 文件查询工具-CSDN博客
  5. 使用PyQt5和 QtChart 可视化图表 创建多界面应用_pyqt设计两个页面-CSDN博客

希望这些推荐的文章对你有帮助，祝你编程愉快！如果你有任何其他问题，请随时告诉我。😊

LIY若依
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
html、css实现日历功能
10-24
CSS3简单实现日历功能的一个小程序，打开html文件即可直接运行，直接用CSS3实现，没有用到框架等 适合新手
日历(HTML,CSS和JavaScript实现)
千万亿
10-23 1441
用最原生的方式实现一个日历(html,css和javascript)
js+html制作简单日历的方法
12-09
新手一枚，不会写什么高大上的博文，一些平时做的小练习，献丑 代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> * {margin: 0;padding: 0} #calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative} #calendar h4 {text-align
从0开始，手写一个日历控件
xiong305的博客
01-19 892
从0搭建日历组件
HTML 日历
haiyan09的博客
04-14 8147
HTML实现日历编写 输出效果展示 HTML代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n...
万年历、日历——拿来即用（简单易上手，操作方便）
weixin_57285134的博客
05-12 1858
前段时间用到了搞出来了，所以就和大家分享一下，上成果。整个日历结构还是比较简单的，注释啥的都给大哥们整好了，都是手写的静态数据请放心食用，效果图呈上！ HTML代码： CSS代码： JS代码： 大功告成！最后欢迎大家讨论发言，提出问题~~~
CSS+Javascript+Html日历控件
zhaoyang314的博客
10-30 1890
最近，因需要用HTML+JAVASCRIPT+CSS实现了一个日历控件，单击上月、下月进行日历切换。当前日期在日历中变颜色标注显示。还是老老套路、老方法，分HML+CSS+JAVASCRIPT三部分代码。 这段代码主要包含三个部分，一是头部显示年月，上月、下月切换按钮；二是显示星期一到日；三是日期容器，存在日期。 这段代码主要定义了日历的样式，一个主要的方法简述如下： 此段代码实现了当月日历情况，单击上月、下月进行月份切换。
日历控件(html\css\javascript编写)
10-19
在IT领域，日历控件是网页应用中常见的交互元素，用于显示日期并允许用户选择特定日期。...同时，这个项目也提供了一个实战平台，让开发者能够实践HTML、CSS和JavaScript的结合使用，提升实际项目开发能力。
使用vue写的一个简单的日历
08-10
总之，"vue-datepicker-master"项目提供了一个基于Vue.js的简单日历组件示例，展示了如何利用Vue的组件化思想和数据驱动特性来构建交互式的用户界面。通过学习这个项目，开发者可以加深对Vue.js的理解，并进一步提升...
recal使用现代CSS实现的ReactPreact日历组件
08-07
2. 示例或演示：可能包含一个示例应用程序，展示如何在实际项目中集成和使用这个日历组件。 3. 文档：详细说明如何安装、配置和自定义组件的文档，对于开发者来说非常重要。 4. 测试：测试用例和脚本，用于验证组件...
利用js和css创建日历控件
09-17
### 使用CSS和JavaScript创建日历控件的知识点详解...综上所述，通过合理的CSS样式设计与JavaScript逻辑编写，可以实现一个功能完备且美观的日历控件。这不仅可以提升用户界面的交互性，也能增加应用的功能性和实用性。
Calendar-UI-UX-Design:这是2021年1月的日历的前端设计（UIUX）。 它完全使用纯HTML和CSS制成。 我已经为一些实践动手HTML和CSS做了这个。 单击下面的链接查看日历的设计
05-25
本篇文章将详细探讨如何使用HTML5和CSS3技术，构建一个2021年1月的日历界面设计，为初学者提供一个实战案例，加深对这两种基础技术的理解。 首先，HTML5是现代网页开发的标准，它强化了网页的结构，并提供了更多的...
HTML+js实现日历课程表
weixin_53632561的博客
07-05 2424
使用html+js通过日历的形式实现课程表的展示
HTML简单电子日历
2301_77335001的博客
04-15 744
【代码】HTML简单电子日历。
vue+html5+css制作日历代码，工作日配置
最新发布
木辰風的博客
04-26 1125
因系统需要，需要制作一个功能--需要的业务有：1.初始化与国家放假情况一致，之后支持手动进行工作日配置；2.展示12个月的放假/工作日情况；3.一些特殊的日期，如调休春节等需要进行展示。
HTML+CSS+JavaScript实现简单的日历效果
apple_54470279的博客
04-06 6123
初学前端花了一下午写了一个简单的日历效果： 可以选择按月或者按年切换，当前日期会有绿色的背景显示， 所有的日期都会正确的对应星期几。 所有代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单日历效果</title> <style> * { ...
HTML+JavaScript自己动手做日历
weixin_49346755的博客
06-16 2959
HTML+JavaScript自己动手做日历 1. 创建DOM代码 本例的HTML代码如下： <div class="calendar"> <div class="title"> <h1 class="green" id="calendar-title">Month</h1> <h2 class="green small" id="calendar-year">Year</h2> <a href=""
html界面实现日历选择功能
会飞的鱼儿的博客
08-17 5673
一、需求 1、实现日历显示功能。 2、并且能够实现根据开始日期和结束日期进行限制日历选择 3、能够实现日历选中框的样式 4、能够实现日历中多个选中图标，具体效果如下 二、实现方式 1、引用第三方插件calendar;github地址：https://github.com/AppianZ/calendar 2、中文插件说明地址：https://segmentfault.com/a/1190000009590699 3、css和js下载代码如下：https://download.csdn.n
用代码编写一个日历排课系统
03-25
非常抱歉，我无法直接为您编写代码。但是，我可以向您提供有关日历排课系统的一些常用实现方式。常见的方法包括使用 MySQL 数据库存储排课记录、使用 PHP 编写后端处理程序以及使用 JavaScript 和 HTML/CSS 创建前端界面。此外，还可以考虑使用现有的开源排课系统，如 Moodle 或 Open edX。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LIY若依

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值