ජාවාස්ක්‍රිප්ට් හි දින දර්ශනයක මාසය මාරු කිරීම සඳහා ඊතල

දැන් අපි දින දර්ශනයට යටින් මාසය මාරු කිරීම සඳහා ඊතල කරමු. HTML කේතයේ වෙනස්කම් කරමු:

<div id="parent">
	<div id="calendar">
		<div class="info">Yandex 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));
});

මාසය මාරු කිරීමේ බොත්තම් වල ක්‍රියාකාරිත්වය ක්‍රියාත්මක කරන්න.

දින දර්ශනයට ඉහළින් ඇති තොරතුරු පෙන්වන මාසය සහ වර්ෂයට අනුරූප වන පරිදි සකසන්න.