JavaScriptтеги календарьде айды алмаштыруу учун жебелер

Эми календарьдын астына айды алмаштыруу учун жебелер жасайлы. HTML кодго өзгөртүүлөрдү киргизейли:

<div id="parent">
	<div id="calendar">
		<div class="info">Янв 2020</div>
		<table>
			<thead>
				<tr>
					<th>дүй</th>
					<th>шей</th>
					<th>шар</th>
					<th>бей</th>
					<th>жума</th>
					<th>ишем</th>
					<th>жек</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

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

Жебелерге шилтемелерди өзгөрмөлөргө алайлы:

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

Талкуу

Эми көйгөйү кантип чечүү керек экенин талкуулайлы. Чындыгында биздин календардын коду жакшы кеңейтүүчү жазылган: бизде draw функциясы бар, ал берилген ай үчүн календардын чийирин тартат. Ошентип, жебеге басканда биз календарды башка айдын номуру менен (жана мүмкүн жыл менен) кайрадан чийе алабыз.

Төмөндө кийинки айдын жебесине чыкылдатуу менен эмне кыла аларыбыздын мисалы:

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

Көрүнүп тургандай, бул жерде getNextYear жана getNextMonth функциялары колдонулат. Алар эмне кылышы керек экенин талкуулайлы.

Атынан көрүнүп тургандай getNextYear функциясы кийинки жылды алат. Бул жерде төмөнкүдөй түшүнүктү билдирет: эгерде азыр декабрь болсо, анда кийинки айга өткөндө жыл 1 көбөйүшү керек. Эгерде азыр декабрь болбосо, анда функция жөн гана учурдагы жылды кайтарышы керек.

getNextMonth функциясы кийинки айды алышы керек. Ал декабрьден тышкары бардык айлар үчүн айдын номуруна бирдик кошот. Ал эми декабрь үчүн кийинки ай 0 номуру менен январь болот.

Окшош операцияларды мурунку айдын баскычына басканда аткаруу керек:

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

Айды алмаштыруу баскычтарынын ишин ишке ашырыңыз.

Календардын үстүндөгү маалымат көрсөтүлүп жаткан айга жана жылга дал келүүсүн жасаңыз.