Kalender in JavaScript
In hierdie afdeling sal ons 'n kalender implementeer. Vir eenvoud sal ons net maak dat die kalender vir die huidige maand vertoon word. Maar met die oog op die feit dat dit later uitgebrei kan word sodat die maand en jaar verander kan word. Hier is 'n voorbeeld van wat ons moet kry:
Hier is die opmaak wat jy kan gebruik wanneer jy die probleem oplos:
<div id="parent">
<div id="calendar">
<table>
<thead>
<tr>
<th>ma</th>
<th>di</th>
<th>wo</th>
<th>do</th>
<th>vr</th>
<th>sa</th>
<th>so</th>
</tr>
</thead>
<tbody class="body"></tbody>
</table>
</div>
</div>
#parent {
text-align: center;
}
#calendar {
display: inline-block;
}
#calendar td, #calendar th {
padding: 5px 12px;
border: 1px solid black;
text-align: center;
}
Laat ons dadelik verwysings na al die nodige tags in veranderlikes kry, en ook die huidige maand en jaar aanteken:
let calendar = document.querySelector('#calendar');
let body = calendar.querySelector('.body');
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth();
Kopieer die voorsiene kode-rade vir jouself.