Anak Panah untuk Menukar Bulan dalam Kalendar pada JavaScript

Sekarang mari kita buat anak panah di bawah kalendar untuk menukar bulan. Mari ubah kod HTML:

<div id="parent">
	<div id="calendar">
		<div class="info">Jan 2020</div>
		<table>
			<thead>
				<tr>
					<th>isn</th>
					<th>sel</th>
					<th>rab</th>
					<th>kha</th>
					<th>jum</th>
					<th>sab</th>
					<th>ahd</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Mari ubah kod CSS:

#parent {
	text-align: center;
}
#calendar {
	display: inline-block;
}
#calendar td, #calendar th {
	padding: 10px;
	border: 1px solid black;
	text-align: center;
}

#calendar .nav, #calendar .info {
	text-align: center;
}
#calendar a {
	color: blue;
	font-size: 25px;
	text-decoration: none;
}
#calendar a:hover {
	color: red;
}

#calendar .active {
	color: red;
}

Mari dapatkan pautan ke anak panah dalam pembolehubah:

let prev = calendar.querySelector('.prev');
let next = calendar.querySelector('.next');

Perbincangan

Sekarang mari kita bincangkan bagaimana untuk menyelesaikan masalah. Sebenarnya kod kalendar kami ditulis dengan kebolehluasan yang baik: kami mempunyai fungsi draw, yang melukis kalendar untuk bulan yang ditentukan. Oleh itu, apabila anak panah ditekan, kami boleh melukis semula kalendar dengan nombor bulan yang berbeza (dan mungkin tahun).

Berikut adalah contoh apa yang boleh kami lakukan pada klik anak panah bulan berikutnya:

next.addEventListener('click', function() {
	draw(body, getNextYear(year, month), getNextMonth(month));
});

Seperti yang anda lihat, fungsi digunakan di sini getNextYear dan getNextMonth. Mari kita bincangkan apa yang sepatutnya mereka lakukan.

Seperti namanya, fungsi getNextYear mendapatkan tahun berikutnya. Di sini maksudnya itu, jika sekarang Disember, maka apabila menukar kepada bulan berikutnya tahun harus meningkat sebanyak 1. Jika sekarang bukan Disember, maka fungsi hanya harus mengembalikan tahun semasa.

Fungsi getNextMonth harus mendapatkan bulan berikutnya. Ia untuk semua bulan, kecuali Disember, akan menambah nombor bulan satu. Dan untuk Disember bulan berikutnya akan menjadi Januari dengan nombor 0.

Operasi yang sama harus dilakukan apabila menekan butang bulan sebelumnya:

prev.addEventListener('click', function() {
	draw(body, getPrevYear(year, month), getPrevMonth(month));
});

Laksanakan kerja butang untuk menukar bulan.

Pastikan maklumat di atas kalendar sepadan dengan bulan dan tahun yang dipaparkan.