Rumah > Artikel > hujung hadapan web > Cara membuat kalendar setahun penuh dengan JavaScript
Cara membuat kalendar setahun penuh dengan JavaScript
- WBOYasal
- 2023-05-12 14:44:081431semak imbas
JavaScript ialah bahasa pengaturcaraan yang sangat popular yang boleh digunakan untuk mencipta pelbagai aplikasi dan tapak web Salah satu aplikasi yang paling berguna ialah mencipta kalendar setahun penuh. Kalendar setahun penuh ialah alat kalendar yang boleh memaparkan semua tarikh sepanjang tahun Ia sangat sesuai sebagai alat pengurusan masa dan rakaman yang mudah, dan juga boleh membantu orang ramai merancang dan mengatur jadual masa hadapan.
Dalam artikel ini, kami akan memperkenalkan cara membuat kalendar setahun penuh dalam JavaScript, membolehkan anda mempelajari dan mengamalkan kemahiran pengaturcaraan JavaScript.
Langkah Pertama: HTML Skeleton
Untuk membuat kalendar setahun penuh, anda perlu mencipta bekas dalam halaman HTML untuk meletakkan keseluruhan kalendar. Di bawah ialah rangka HTML kami:
<!DOCTYPE html>
<html>
<head>
<title>全年日历</title>
</head>
<body>
<div class="calendar"></div>
</body>
</html>Dalam rangka ini, kami mencipta elemen DIV yang dipanggil "kalendar" yang akan digunakan untuk memegang kalendar kami.
Langkah 2: Gaya CSS
Untuk menjadikan kalendar kami kelihatan cantik dan mudah dibaca, kami perlu menambah gaya CSS. Berikut ialah kod CSS kami:
.calendar {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
.calendar h1 {
text-align: center;
}
.calendar table {
width: 100%;
height: 100%;
border-collapse: collapse;
border: 1px solid #ccc;
}
.calendar table th {
background-color: #f2f2f2;
text-align: center;
font-size: 18px;
font-weight: bold;
border: 1px solid #ccc;
}
.calendar table td {
text-align: center;
font-size: 16px;
border: 1px solid #ccc;
}
.calendar table td.today {
background-color: #f2f2f2;
}Dalam kod di atas, kami menetapkan beberapa gaya asas untuk bekas dan menetapkan sempadan sel jadual kepada garis kelabu pepejal 1 piksel. Kami juga menetapkan beberapa warna dan saiz fon untuk tajuk, pengepala dan sel data jadual.
Langkah Tiga: Kod JavaScript
Sekarang, kami akan menggunakan JavaScript untuk menjana kalendar tahun penuh kami secara dinamik. Kami akan menggunakan objek Tarikh untuk mendapatkan dan mengira tarikh, dan operasi DOM untuk mencipta dan mengemas kini elemen HTML kami. Di bawah ialah kod JavaScript lengkap:
const calendar = document.querySelector('.calendar');
const months = [
"一月", "二月", "三月",
"四月", "五月", "六月",
"七月", "八月", "九月",
"十月", "十一月", "十二月"
];
// 获取当前日期
const today = new Date();
const currentMonth = today.getMonth();
const currentYear = today.getFullYear();
// 创建并更新标题
const title = document.createElement('h1');
title.textContent = `${currentYear}年`;
calendar.appendChild(title);
// 创建表格
const table = document.createElement('table');
calendar.appendChild(table);
// 创建表头
const thead = document.createElement('thead');
table.appendChild(thead);
const weekdayNames = ["日", "一", "二", "三", "四", "五", "六"];
const tr = document.createElement('tr');
weekdayNames.forEach(day => {
const th = document.createElement('th');
th.textContent = day;
tr.appendChild(th);
});
thead.appendChild(tr);
// 创建并更新表格数据
const tbody = document.createElement('tbody');
table.appendChild(tbody);
// 计算日期并创建表格
for (let month = 0; month < 12; month++) {
const tr = document.createElement('tr');
tbody.appendChild(tr);
for (let weekday = 0; weekday < 7; weekday++) {
const td = document.createElement('td');
tr.appendChild(td);
// 计算日期
const date = new Date(currentYear, month, 1 + weekday - new Date(currentYear, month, 1).getDay());
// 添加日期
if (date.getMonth() === month) {
td.textContent = date.getDate();
}
// 添加类名
if (today.toDateString() === date.toDateString()) {
td.classList.add('today');
}
// 添加月份标题
if (weekday === 0) {
const th = document.createElement('th');
th.setAttribute('colspan', 7);
th.textContent = months[month];
tbody.appendChild(th);
}
}
}Dalam kod di atas, kami mula-mula mendapat tarikh semasa dan menyimpan bulan dan tahun semasa. Kami kemudian menggunakan manipulasi DOM untuk mencipta tajuk, jadual dan pengepala. Seterusnya, kami menggunakan gelung bersarang untuk mengira dan mencipta jadual bagi setiap bulan. Kami mula-mula membuat baris dalam jadual dan kemudian sel dalam setiap baris. Kami menggunakan objek Tarikh untuk mengira tarikh dalam setiap sel dan menambahnya pada sel. Kami juga menambah nama kelas untuk tarikh semasa supaya kami boleh menukar gayanya menggunakan CSS. Akhir sekali, kami menambah pengepala pada lajur pertama setiap bulan untuk menunjukkan bulan semasa.
Langkah 4: Uji
Mari kita uji kod kita dalam penyemak imbas. Buka penyemak imbas anda dan masukkan URL fail HTML dalam bar alamat, dan anda akan melihat kalendar tahun penuh yang bagus dengan semua bulan dari bulan semasa hingga tahun berikutnya.
Kesimpulan
Artikel ini menunjukkan cara untuk mencipta kalendar setahun penuh secara dinamik menggunakan JavaScript. Kami menggunakan operasi DOM, objek Tarikh dan CSS untuk mencapai ini. Mempelajari dan mempraktikkan projek ini boleh membantu anda meningkatkan kemahiran pengaturcaraan JavaScript anda dan memberikan anda alat pengurusan masa yang mudah.
Atas ialah kandungan terperinci Cara membuat kalendar setahun penuh dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!