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

ယခုအခါ ပြက္ခဒိန်အောက်တွင် လများပြောင်းလဲရန် မြှားခလုတ်များ ပြုလုပ်ကြပါစို့။ HTML ကုဒ်ကို အောက်ပါအတိုင်း ပြောင်းလဲပါမည်။

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 ကုဒ်ကို အောက်ပါအတိုင်း ပြောင်းလဲပါမည်။

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 များအဖြစ် ရယူပါမည်။

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

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

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

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

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

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

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

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

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

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