#2.4 Делаем календарь на JavaScript и задание, работа с DOM
Как сделать календарь в 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); }
Как сделать часы в js?
HTML: <div id="clock"></div> Создаём функцию: function update(){ let date = new Date() //собираем дату let hours = date.getHours() //создаем переменные для часов, минут и секунд let min = date.getMinutes() let sec = date.getSeconds() //опциональный шаг - если мы хотим получить...