215 читали · 2 года назад
Как сделать календарь в JS? В HTML нам поднадобиться всего лишь один div с классом container: <div class="container"></div> Вся оснавная работа будет в js. Сначала необходимо создать функцию, которая будте корректировать дату т.к. в js день недели начинается с воскресенья, а нам привычнее видеть стандарт даты с понедельника:    function getDay(date){    let day = date.getDay();    if(day == 0) day = 7    return day-1    } Далее мы прописываем основную функцию:    function createCalender(elem, year, month){    elem = document.querySelector(elem) // сюда при вызоые мы будем записывать элимент, в который будет вложен календарь    let mon = month - 1 // т.к. js считает январь нулевым месяцем    let d = new Date(year, mon)    let table = `    <table>    <caption>${month}.${year}</caption> //заголовок таблицы    <tr>    <th>пн</th>    <th>вт</th>    <th>ср</th>    <th>чт</th>    <th>пт</th>    <th>сб</th>    <th>вс</th>    </tr>    <tr> //не закрываем теги таблицы и tr т.к. затем пропишем циклы, которые будут записывать дни    `;    for (let i = 0; i<getDay(d); i++){   //пустые ячейки, если месяц начинается не с понедельника    table += `<td></td>`    }    //гениратор дней    while (d.getMonth() == mon){    table += '<td>' + d.getDate() + '</td>'    if (getDay(d) % 7 == 6){    table += '</tr><tr>'    }    d.setDate(d.getDate() + 1)    }    if (getDay(d) != 0){    for (let i = getDay(d); i<7; i++){  //пустые ячейки если месяц заканчивается не воскресеньем    table += `<td></td>`    }    }    table += '</tr></table>' // закрываем таблицы    elem.innerHTML = table // добавляем код HTML в таблицу    } И вызываем функцию, передав в нее параметры (расположение, год, месяц) createCalender('body', 2023, 4) Таблице мы также можем добавить несколько стилей в css: .container {   display: flex;   flex-wrap: wrap; } table {   border-collapse: collapse;   margin-bottom: 10px;   margin-right: 10px; } caption {   padding: 10px 0;   background-color: rgb(69, 154, 69);   border: 1px solid black;   border-bottom: none; } td, th {   border: 1px solid black;   padding: 8px;   text-align: center;   font-size: 18px; } th {   font-weight: bold;   background-color: rgb(47, 112, 47); }
3 года назад
Как сделать адаптивное меню только на HTML и CSS
Сейчас большинство пользователей сети просматривает web-ресурсы со своих гаджетов, для большинства из них требуется адаптивная версия сайтов, чтобы контент отображался привлекательно. Именно поэтому, каждый разработчик должен сразу адаптировать ресурс под все виды устройств. Есть большое количество способов сделать это. Многие пользуются уже готовыми блоками, что упрощает и ускоряет разработку.В этой статье я расскажу как сделать меню сайта адаптивным, не используя при этом сложных конструкций языка Java Script...