Закрасит ячейки в календаре циклом JS

146

25 мая 2019, 23:30

Есть 30 блоков .block стилизованные как календарь. Можно ли сделать красивый цикл в JS чтобы например каждый 6 и 7 блок (отвечающий за выходные) покрасить в другой цвет, типа такого:

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

(При этом не применяя дополнительные классы для .block)

Answer 1

Знаю, что немного не по теме, но оставлю это здесь. Может, кому-нибудь пригодится.

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>

Answer 2

можно без 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>