JavaScript ဖြင့် ပြက္ခဒိန်တွင် လများပြောင်းလဲရန် မြှားခလုတ်များ

ယခုအခါ ပြက္ခဒိန်အောက်တွင် လများပြောင်းလဲရန် မြှားခလုတ်များ ပြုလုပ်ကြပါစို့။ 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;
}

မြှားခလုတ်များကို ရည်ညွှန်းသော လင့်ခ်များကို variable များအဖြစ် ရယူပါမည်။

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

ဆွေးနွေးချက်

ယခုအခါ ပြဿနာကို မည်သို့ဖြေရှင်းရမည်ကို ဆွေးနွေးကြပါစို့။ ကျွန်ုပ်တို့၏ ပြက္ခဒိန်ကုဒ်သည် ကောင်းစွာချဲ့ထွင်နိုင်အောင် ရေးသားထားသည်။ ကျွန်ုပ်တို့တွင် သတ်မှတ်ထားသောလအတွက် ပြက္ခဒိန်ကိုရေးဆွဲပေးသည့် draw function တစ်ခုရှိသည်။ ထို့ကြောင့် မြှားတစ်ခုကိုနှိပ်လိုက်သည်နှင့် ကျွန်ုပ်တို့သည် လအမှတ်စဉ်အသစ်တစ်ခုဖြင့် (နှစ်အသစ်တစ်ခုနှင့်လည်း ဖြစ်နိုင်သည်) ပြက္ခဒိန်ကို ပြန်လည်ရေးဆွဲနိုင်သည်။

နောက်လသို့ပြောင်းရန် မြှားကိုနှိပ်လိုက်သည့်အခါ ကျွန်ုပ်တို့မည်သို့လုပ်ဆောင်နိုင်သည်ကို နမူနာတစ်ခုအနေဖြင့် ဖော်ပြထားသည်။

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

သင်မြင်သည့်အတိုင်း၊ ဤတွင် getNextYear နှင့် getNextMonth function များကို အသုံးပြုထားသည်။ ထို function များမည်သို့လုပ်ဆောင်သင့်သည်ကို ဆွေးနွေးကြပါစို့။

အမည်ကိုက ဖော်ပြသည့်အတိုင်း getNextYear function သည် နောက်နှစ်ကို ရယူပေးသည်။ ဤတွင် ဆိုလိုသည်မှာ လက်ရှိတွင် ဒီဇင်ဘာလဖြစ်နေပါက နောက်လသို့ပြောင်းလဲရန် နှစ်ကို 1 တိုးပေးရမည်။ သို့သော် လက်ရှိတွင် ဒီဇင်ဘာလမဟုတ်ပါက ထို function သည် လက်ရှိရှိနေသည့် နှစ်ကိုသာ ပြန်ပေးသင့်သည်။

getNextMonth function သည် နောက်လကို ရယူပေးရမည်။ ဒီဇင်ဘာလမှလွဲ၍ အခြားသောလများအတွက် လအမှတ်စဉ်ကို တစ်ခု ထပ်ပေါင်းထည့်ပေးရမည်။ ဒီဇင်ဘာလအတွက်မူ နောက်လသည် ဇန်နဝါရီလဖြစ်ပြီး အမှတ်စဉ်မှာ 0 ဖြစ်သည်။

အလားတူသော လုပ်ဆောင်ချက်များကို ယခင် လသို့ပြောင်းရန် ခလုတ်ကိုနှိပ်သည့်အခါတွင်လည်း ပြုလုပ်ရမည်။

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

လပြောင်းလဲရန် ခလုတ်များ၏လုပ်ဆောင်ချက်ကို အကောင်အထည်ဖော်ပါ။

ပြက္ခဒိန်အပေါ်တွင်ပြသထားသော သတင်းအချက်အလက်သည် ပြသထားသည့် လနှင့် နှစ်နှင့် ကိုက်ညီအောင်ပြုလုပ်ပါ။