Bina Laman Web Kalendar Bulan-tutorial css-php.cn

Bina Laman Web Kalendar Bulan

王林

Lepaskan： 2024-08-27 18:01:18

asal

474 orang telah melayarinya

Build a Month Calendar Website

pengenalan

Helo, pembangun! Saya sangat teruja untuk berkongsi projek terbaharu saya: Kalendar Bulan. Projek ini sesuai untuk sesiapa sahaja yang ingin mencipta kalendar yang berfungsi dan menarik secara visual dalam JavaScript. Sama ada anda berminat untuk menambahkan ciri kalendar pada tapak web atau hanya ingin meningkatkan kemahiran JavaScript anda, projek ini akan menjadi tambahan yang berharga kepada portfolio anda.

Gambaran Keseluruhan Projek

Kalendar Bulan ialah aplikasi berasaskan web yang memaparkan bulan semasa, menyerlahkan tarikh hari ini dan menyusun hari dalam seminggu dengan tepat. Projek ini mempamerkan cara menjana kalendar secara dinamik menggunakan JavaScript, digabungkan dengan antara muka yang anggun dan responsif yang dibina dengan HTML dan CSS.

Ciri-ciri

Paparan Bulan Dinamik: Memaparkan bulan dan tahun semasa secara automatik.
Tarikh Semasa Diserlahkan: Tarikh hari ini diserlahkan untuk pengecaman mudah.
Reka Letak Hari yang Tepat: Hari dalam seminggu dijajarkan dengan betul mengikut bulan.

Teknologi yang Digunakan

HTML: Menyediakan struktur untuk Kalendar Bulan.
CSS: Menggayakan kalendar, memastikan ia menarik secara visual dan responsif.
JavaScript: Mengendalikan logik untuk menjana kalendar, termasuk mengira hari dan menyerlahkan tarikh semasa.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

Month-Calendar/
├── index.html
├── style.css
└── script.js

Salin selepas log masuk

index.html: Mengandungi struktur HTML untuk Kalendar Bulan.
style.css: Termasuk gaya CSS untuk mencipta reka bentuk moden dan responsif.
script.js: Mengurus kefungsian penjanaan kalendar.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

git clone https://github.com/abhishekgurjar-in/Month-Calendar.git

Salin selepas log masuk

Buka direktori projek:
```
cd Month-Calendar
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam penyemak imbas web untuk melihat Kalendar Bulan.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Lihat bulan semasa dengan tarikh hari ini diserlahkan.
Navigasi sepanjang hari untuk melihat reka letak sepanjang bulan.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur Kalendar Bulan, termasuk paparan bulan dan reka letak grid untuk hari-hari. Berikut adalah coretan:

<!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>

Salin selepas log masuk

CSS

Fail style.css menggayakan Kalendar Bulan, menjadikannya menarik dan responsif. Di bawah ialah beberapa gaya utama:

* {
  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;
}

Salin selepas log masuk

JavaScript

Fail script.js mengandungi logik untuk menjana kalendar dan menyerlahkan tarikh semasa. Berikut ialah coretan:

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;

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung projek Kalendar Bulan di sini.

Kesimpulan

Mencipta Kalendar Bulan ialah projek yang menyeronokkan yang membolehkan saya menggabungkan kemahiran pembangunan bahagian hadapan saya dengan fungsi JavaScript praktikal. Alat ini berguna untuk memaparkan tarikh kalendar di tapak web dan boleh menjadi tambahan yang bagus kepada projek pembangunan web anda. Saya harap anda mendapati ia membantu seperti saya. Selamat mengekod!

Kredit

Projek ini dibangunkan sebagai sebahagian daripada perjalanan saya untuk meningkatkan kemahiran JavaScript saya dan mencipta alatan web yang berfungsi.