There are 30 .block blocks styled as a calendar. Is it possible to make a beautiful cycle in JS so that for example every 6 and 7 block (responsible for weekends) is painted in a different color, like this:

for (let i=0; i<30; i++) { ----<УСЛОВИЕ>---- { document.getElementsByClassName('block')[i].style.background = "green"; } }

(Not using additional classes for .block)

  • if ((i % 5) === 0) { /* каждый шестой */ - Lexx918
  • @Danil and if the month does not start on Monday? - UModeL

2 answers 2

I know that a little off topic, but leave it here. Maybe someone will come in handy.

 let oMonthName = document.querySelector('.month-name'); let oMonthGrid = document.querySelector('.month-grid'); // Дата let oDateNow = new Date(); // Число let nCurrDay = oDateNow.getDate(); // Количество дней let nDayNumb = 32 - new Date(oDateNow.getFullYear(), oDateNow.getMonth(), 32).getDate(); // Название месяца oMonthName.innerHTML = oDateNow.toLocaleString('ru-RU', {month: 'long'}); // Коррекция для начала месяца oDateNow.setDate(nCurrDay + 2); // Отступ в начале oMonthGrid.innerHTML += `<div style="background:#ddd;height:1.6em;width:calc(2.5em * ${oDateNow.getDay()});"></div>`; // Заполнение сетки for (let i = 1; i <= nDayNumb; i++) { // Добавление анимации для текущего числа oMonthGrid.innerHTML += `<div class="block" style="${((i != nCurrDay)?'':'animation:pulse 1s ease-in-out infinite')};">${i}</div>`; } // Отступ в конце oMonthGrid.innerHTML += `<div style="background:#ddd;height:1.6em;flex:1;"></div>`; 
 * { margin: 0; padding: 0; box-sizing: border-box; } .month-wrap { margin: 30px auto; text-align: center; font: bold 14px 'Tahoma'; } .month-name { display: inline-block; width: 1.4em; padding: 0.3em; line-height: 1em; letter-spacing: 0.1em; word-wrap: break-word; vertical-align: middle; text-transform: uppercase; } .month-grid { display: inline-flex; flex-flow: row wrap; width: calc(2.5em * 7); vertical-align: middle; background: linear-gradient(to left, #ffcccc 2.5em, #d1e9fa 2.5em, #d1e9fa 5em, transparent 5em); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.6); } .block { height: 1.6em; width: 2.5em; line-height: 1.6em; padding-right: 0.3em; text-align: right; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 10px 0px rgba(0, 0, 0, 0.3); } @keyframes pulse { 50% { box-shadow: inset 0 0 25px 5px rgba(0, 0, 0, 0.15); } } 
 <div class="month-wrap"> <div class="month-name"></div> <div class="month-grid"></div> </div>

    possible without javascript

     .week { width:300px; display:flex; } .block { flex: 1 auto; border: 1px solid black; } .block:nth-child(7), .block:nth-child(6) { background: red; } 
     <div class="week"> <div class="block">1</div> <div class="block">2</div> <div class="block">3</div> <div class="block">4</div> <div class="block">5</div> <div class="block">6</div> <div class="block">7</div> </div> <div class="week"> <div class="block">8</div> <div class="block">9</div> <div class="block">10</div> <div class="block">11</div> <div class="block">12</div> <div class="block">13</div> <div class="block">14</div> </div> <div class="week"> <div class="block">15</div> <div class="block">16</div> <div class="block">17</div> <div class="block">18</div> <div class="block">19</div> <div class="block">20</div> <div class="block">21</div> </div> <div class="week"> <div class="block">22</div> <div class="block">23</div> <div class="block">24</div> <div class="block">25</div> <div class="block">26</div> <div class="block">27</div> <div class="block">28</div> </div>

    • Here is the question in the condition for JS, is there a beautiful way to write such a condition on it? - Danil