Всем привет. Изучаю javascript. Тренируюсь с календарем. Но чет не получается. Точнее не могу придумать как реализовать смену месяца и соответственно дней. Если по событию клика по
buttonPrev
отниму единицу от
monthNow
, то теоретически должен смениться месяц и соответственно числа. Но я понимаю, что циклом ранее уже все вывел. Но блин как реализовать все это не могу додуматься(( Подтолкните на путь истинный.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Моя первая программа</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cal">
</div>
<script src="js.js"></script>
</body>
</html>
.cal__days_day {
display: inline-flex;
border: 2px solid black;
border-radius: 6px;
margin: 3px;
width: 30px;
height: 30px;
align-items: center;
justify-content: center;
}
.cal__days {
text-align: center;
}
.today {
background-color: green;
}
button {
width: 50px;
height: 50px;
margin: 30px;
}
.cal {
text-align: center;
}
let dateNow = new Date();
let monthNow = dateNow.getMonth(); // сегодняшний месяц
let daysMonthNow = new Date(2020, monthNow, 1); // 1 число сегодняшнего месяца
let daysMonthPrev = new Date(2020, monthNow + 1, 1); // 1 число следующего месяца
let daysInMonthNow = Math.round((daysMonthPrev- daysMonthNow) / 1000 / 3600 / 24); // Количество дней в текущем месяце
let months = ['январь', 'февраль', 'март', 'апрель', 'май', 'июнь', 'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь', 'декабрь'];
let cal = document.querySelector('.cal');
let ul = document.createElement('ul');
ul.classList.add('cal__days');
cal.appendChild(ul); // вставил тег ul
for (var i = 1; i <= daysInMonthNow; i++) { // Вывожу числа текущего месяца списком
let li = document.createElement('li');
li.classList.add('cal__days_day');
li.innerHTML = i;
ul.appendChild(li);
if (dateNow.getDate() == i) { // добавил стиль текущему дню
li.classList.add('today');
}
};
let buttonNext = document.createElement('button');
buttonNext.innerHTML = '►';
cal.prepend(buttonNext); // создал кнопку "вперед"
let buttonPrev = document.createElement('button');
buttonPrev.innerHTML = '◄';
buttonPrev.addEventListener('click', function(){
monthNow--;
})
cal.prepend(buttonPrev); // // создал кнопку "назад"
let month = document.createElement('p');
month.innerHTML = months[monthNow];
cal.prepend(month);
let year = document.createElement('p');
year.innerHTML = dateNow.getFullYear();
cal.prepend(year);
https://codepen.io/yagyar001/pen/RwrYwRZ