介绍
开发者们大家好！我很高兴分享我的最新项目：月历。该项目非常适合任何想要用 JavaScript 创建实用且具有视觉吸引力的日历的人。无论您是有兴趣向网站添加日历功能，还是只是想提高您的 JavaScript 技能，这个项目都将是您投资组合中的宝贵补充。
项目概况
月历是一款基于网络的应用程序，可显示当前月份、突出显示今天的日期并准确排列一周中的日期。该项目展示了如何使用 JavaScript 动态生成日历，并结合使用 HTML 和 CSS 构建的时尚且响应式的界面。
特征
-
动态月份显示：自动显示当前月份和年份。
-
突出显示当前日期：突出显示今天的日期以便于识别。
-
准确的日期布局：星期几根据月份正确对齐。
使用的技术
-
HTML：提供月历的结构。
-
CSS：设置日历样式，确保其具有视觉吸引力和响应能力。
-
JavaScript：处理生成日历的逻辑，包括计算天数和突出显示当前日期。
项目结构
以下是项目结构的概述：
Month-Calendar/
├── index.html
├── style.css
└── script.js
登录后复制
-
index.html：包含月历的 HTML 结构。
-
style.css：包含 CSS 样式以创建现代且响应式的设计。
-
script.js：管理日历生成功能。
安装
要开始该项目，请按照以下步骤操作：
-
克隆存储库：
git clone https://github.com/abhishekgurjar-in/Month-Calendar.git
登录后复制
-
打开项目目录:
-
运行项目:
- 在网络浏览器中打开index.html文件以查看月历。
用法
-
在网络浏览器中打开网站。
-
查看当前月份并突出显示今天的日期。
-
浏览各天以查看整个月的布局。
代码说明
超文本标记语言
index.html 文件定义了月历的结构，包括月份显示和日期的网格布局。这是一个片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Month Calendar</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Month Calendar</h1>
</div>
<div class="calendar">
<div class="month">
<div class="date">
<h1></h1>
<p></p>
</div>
</div>
<div class="weekdays">
<div>Mon</div>
<div>Tue</div>
<div>Wed</div>
<div>Thu</div>
<div>Fri</div>
<div>Sat</div>
<div>Sun</div>
</div>
<div class="days"></div>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</div>
</body>
</html>
登录后复制
CSS
style.css 文件设置月历的样式，使其既有吸引力又响应灵敏。以下是一些关键样式：
* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
background-color: salmon;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.header {
margin: 20px;
color: white;
text-align: center;
}
.calendar {
background-color: black;
color: lightgray;
width: 450px;
height: 520px;
border-radius: 10px;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
}
.month {
width: 100%;
height: 120px;
background-color: lightseagreen;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 10px 10px 0 0;
}
.month h1 {
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
}
.month p {
font-size: 16px;
}
.weekdays {
width: 100%;
height: 50px;
display: flex;
}
.weekdays div {
font-size: 15px;
font-weight: bold;
letter-spacing: 1px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.days {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 2px;
}
.days div {
font-size: 14px;
margin: 3px;
width: 57.5px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.days div:hover:not(.empty) {
border: 2px solid gray;
cursor: pointer;
}
.today {
background-color: lightseagreen;
}
.footer {
margin-top: 70px;
color: white;
text-align: center;
}
登录后复制
JavaScript
script.js 文件包含生成日历和突出显示当前日期的逻辑。这是一个片段：
const monthEl = document.querySelector(".date h1");
const fullDateEl = document.querySelector(".date p");
const daysEl = document.querySelector(".days");
const monthInx = new Date().getMonth();
const lastDay = new Date(new Date().getFullYear(), monthInx + 1, 0).getDate();
const firstDay = new Date(new Date().getFullYear(), monthInx, 1).getDay() - 1;
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
monthEl.innerText = months[monthInx];
fullDateEl.innerText = new Date().toDateString();
let days = "";
for (let i = firstDay; i > 0; i--) {
days += `<div class="empty"></div>`;
}
for (let i = 1; i <= lastDay; i++) {
if (i === new Date().getDate()) {
days += `<div class="today">${i}</div>`;
} else {
days += `<div>${i}</div>`;
}
}
daysEl.innerHTML = days;
登录后复制
现场演示
您可以在此处查看月历项目的现场演示。
结论
创建月历是一个令人愉快的项目，它使我能够将我的前端开发技能与实用的 JavaScript 功能结合起来。该工具对于在网站上显示日历日期非常有用，并且可以成为您的 Web 开发项目的一个很好的补充。我希望你发现它和我一样有帮助。快乐编码！
制作人员
这个项目是我增强 JavaScript 技能和创建功能性 Web 工具之旅的一部分。
作者
以上是建立一个月历网站的详细内容。更多信息请关注PHP中文网其他相关文章！
