Նավարկության սլաքներ ամիսները փոխելու համար 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));
});

Իրականացրեք ամիսները փոխելու կոճակների աշխատանքը:

Ապահովեք, որ օրացույցի վերևի տեղեկատվությունը համապատասխանի ցուցադրվող ամսվան և տարվան: