開發者們大家好！我很高興分享我的最新項目：月曆。該專案非常適合任何想要用 JavaScript 創建實用且具有視覺吸引力的日曆的人。無論您是有興趣為網站添加日曆功能，還是只是想提高您的 JavaScript 技能，這個專案都將是您投資組合中的寶貴補充。
月曆是一款基於網絡的應用程序，可顯示當前月份、突出顯示今天的日期並準確排列一周中的日期。該專案展示如何使用 JavaScript 動態生成日曆，並結合使用 HTML 和 CSS 建立的時尚且響應式的介面。
以下是項目結構的概述：
Month-Calendar/ ├── index.html ├── style.css └── script.js
要開始該項目，請按照以下步驟操作：
複製儲存庫：
git clone https://github.com/abhishekgurjar-in/Month-Calendar.git
開啟專案目錄:
cd Month-Calendar
運行項目:
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>
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;
}
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中文網其他相關文章！
