Նավարկության սլաքներ ամիսները փոխելու համար JavaScript-ի օրացույցում

Այժմ եկեք օրացույցի տակ ավելացնենք սլաքներ ամիսները փոխելու համար: Եկեք փոփոխություններ կատարենք HTML կոդում:

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 կոդում:

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

Ստացենք հղումները սլաքների վերաբերյալ փոփոխականների մեջ:

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

Քննարկում

Այժմ եկեք քննարկենք, թե ինչպես լուծել խնդիրը: Փաստորեն, մեր օրացույցի կոդը գրված է լավ ընդլայնվող ձևով. մենք ունենք draw ֆունկցիա, որը գծում է օրացույցը տվյալ ամսվա համար: Այսպիսով, սլաքի վրա կտտացնելիս մենք կարող ենք վերագծել օրացույցը ամսվա այլ համարով (և հնարավոր է նաև տարվա):

Ահա մի օրինակ, թե ինչ կարող ենք անել հաջորդ ամսվա սլաքի վրա կտտացնելով:

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

Ինչպես տեսնում եք, այստեղ օգտագործվում են getNextYear և getNextMonth ֆունկցիաները: Եկեք քննարկենք, թե ինչ պետք է անեն դրանք:

Ինչպես հետևում է անվանումից՝ getNextYear ֆունկցիան ստանում է հաջորդ տարին: Այստեղ նկատի ունենք այն, որ եթե այժմ դեկտեմբեր է, ապա հաջորդ ամիս անցնելիս տարին պետք է ավելանա 1-ով: Եթե այժմ դեկտեմբեր չէ, ապա ֆունկցիան պարզապես պետք է վերադարձնի ընթացիկ տարին:

getNextMonth ֆունկցիան պետք է ստանա հաջորդ ամիսը: Այն բոլոր ամիսների համար, բացի դեկտեմբերից, ամսվա համարին կգումարի մեկ: Իսկ դեկտեմբերի համար հաջորդ ամիսը կլինի հունվար 0 համարով:

Նմանատիպ գործողություններ պետք է կատարել նախորդ ամսվա կոճակի վրա կտտացնելիս:

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