建立一個月曆網站-css教學-PHP中文網

建立一個月曆網站

王林

發布： 2024-08-27 18:01:18

原創

474 人瀏覽過

Build a Month Calendar Website

介紹

開發者們大家好！我很高興分享我的最新項目：月曆。該專案非常適合任何想要用 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

登入後複製

開啟專案目錄:
```
cd Month-Calendar
```
登入後複製
運行項目:
- 在網頁瀏覽器中開啟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;

登入後複製