Rumah > Artikel > hujung hadapan web > Cara membuat kalendar bulanan dengan JavaScript
Cara membuat kalendar bulanan dengan JavaScript
- 王林asal
- 2023-05-16 12:45:08690semak imbas
Memperkenalkan cara membuat kalendar bulanan menggunakan JavaScript
JavaScript ialah bahasa pengaturcaraan yang digunakan untuk pembangunan web Ia adalah bahasa skrip dinamik yang biasanya digunakan untuk pembangunan web sebelah pelanggan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan JavaScript untuk mencipta kalendar bulanan ringkas pada halaman web.
Keperluan:
Sebelum membuat kalendar, kami memerlukan fail berikut:
1 Fail HTML untuk membina antara muka web
2.CSS Fail, digunakan untuk menggunakan gaya pada fail HTML
3. Fail JavaScript, digunakan untuk menambah kefungsian kalendar bulanan
Seterusnya, mari buat kalendar bulanan dari awal.
Buat fail HTML
Mula-mula buat fail HTML, kita boleh menulisnya dari awal, atau menggunakan templat dan menyimpannya sebagai fail .html. Tambahkan kod berikut pada fail:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>月历</title>
</head>
<body>
<h1 id="currentMonth">月历</h1>
<table>
<thead>
<tr>
<th>星期日</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
</tr>
</thead>
<tbody id="calendarBody">
</tbody>
</table>
<script type="text/javascript" src="calendar.js"></script>
</body>
</html>Dalam fail HTML ini, kami mentakrifkan teg h1 bertajuk "Kalendar Bulan" dan menambah atribut dengan id "currentMonth" di dalam teg Atribut ini akan digunakan paparkan bulan semasa dalam kod JavaScript. Kami juga menggunakan teg jadual untuk memaparkan kalendar Terdapat tujuh lajur dalam jadual ini, sepadan dengan minggu tujuh hari. Teg tbody digunakan untuk menjana jadual kalendar bulanan dalam kod JavaScript, dan kami juga menambahkan teg skrip yang mengandungi fail JavaScript kami yang akan digunakan untuk menjana kalendar bulanan untuk halaman tersebut.
Kami juga boleh menambah beberapa gaya CSS pada fail HTML ini untuk mencantikkan halaman:
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
text-align: center;
}
th {
height: 25px;
background-color: #cccccc;
}
td {
height: 50px;
}Gaya ini akan menambah beberapa gaya asas pada jadual, elemen ke dan td halaman.
Buat fail JavaScript
Sekarang, kita perlu mencipta fail JavaScript untuk menambah fungsi kalendar bulanan pada halaman. Kami menyimpan fail ini sebagai "calendar.js".
Dalam fail ini, kami mentakrifkan fungsi untuk mencipta jadual kalendar bulanan:
function createCalendar(month, year) {
var weekdays = ["日","一","二","三","四","五","六"];
var calendarBody = document.getElementById("calendarBody");
var daysInMonth = new Date(year, month+1, 0).getDate();
var date = new Date(year, month, 1);
var row = document.createElement("tr");
for (var i = 0; i < weekdays.length; i++) {
var cell = document.createElement("th");
cell.innerText = weekdays[i];
row.appendChild(cell);
}
calendarBody.appendChild(row);
for (var i = 1; i <= daysInMonth; i++) {
var newDate = new Date(year, month, i);
var dayOfWeek = newDate.getDay();
if (dayOfWeek === 0) {
row = document.createElement("tr");
calendarBody.appendChild(row);
}
var cell = document.createElement("td");
cell.innerText = i;
row.appendChild(cell);
}
}Dalam fungsi ini, kami mula-mula mentakrifkan tatasusunan untuk menyimpan nama Ahad hingga Sabtu . Kami juga memperoleh elemen tbody melalui kaedah document.getElementById, dan memperoleh bilangan hari dalam bulan semasa dan tarikh hari pertama. Seterusnya, kami mencipta baris pengepala jadual dan menambah sel pengepala yang mengandungi nama hari dalam minggu dalam baris ini. Kemudian, kami menambah sel tarikh baris demi baris dan jika sel tarikh menemui hari Ahad, kami mencipta baris baharu.
Seterusnya, kita perlu menambah fungsi untuk mengemas kini bulan semasa kalendar bulanan:
function updateCalendar() {
var currentMonth = document.getElementById("currentMonth");
var currentDate = new Date();
var month = currentDate.getMonth();
var year = currentDate.getFullYear();
currentMonth.innerText = year + "年" + (month+1) + "月";
createCalendar(month, year);
}Dalam fungsi ini, kita mula-mula menggunakan kaedah document.getElementById untuk mendapatkan elemen h1 bagi bulan semasa, dan kemudian buat objek Tarikh untuk mendapatkan tarikh, bulan, tahun semasa dan tetapkan atribut innerText bagi elemen h1.
Akhir sekali, kita perlu memanggil fungsi updateCalendar untuk menjana kalendar bulanan:
window.onload = function() {
updateCalendar();
}Kod ini akan memanggil fungsi updateCalendar selepas halaman dimuatkan sepenuhnya.
Pada ketika ini, kami telah menyelesaikan pengeluaran kalendar bulanan. Sekarang kita boleh membuka fail HTML ini dalam penyemak imbas dan melihat kalendar bulanan yang dijana.
Atas ialah kandungan terperinci Cara membuat kalendar bulanan dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!