Блондинка,
Цитата:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #table_year { table-layout: fixed; width: 100%; border: 1px solid hsl(0, 0%, 66%); border-radius: 4px; } .td_month { width: 260px; height: 270px; border: 1px solid hsl(0, 0%, 66%); border-radius: 4px; } #num_year, #month_name { background-color: hsl(210, 100%, 95%); color: hsl(210, 100%, 50%); font: bold 18px serif; text-align: center; } #num_year { width: 790px; border: 1px solid hsl(0, 0%, 66%); border-radius: 4px; padding: 5px; margin: 0 0 5px 0; } #month { display: inline-block; border: 1px solid hsl(0, 0%, 66%); border-radius: 4px; padding: 5px; width: auto; } #month_name { border: 1px solid hsl(0, 0%, 66%); border-radius: 4px; padding: 5px; margin: 0 0 5px 0; } .day { border: 1px solid hsl(0, 0%, 66%); width: auto; line-height: 30px; text-align: center; margin: 1px; background-color: hsl(210, 100%, 95%); color: hsl(210, 100%, 50%); } .table_month_vert { table-layout: fixed; width: 100%; height: 220px; border: 1px solid hsl(0, 0%, 66%); border-radius: 4px; } .week_day { width: 20%; background-color: hsl(210, 100%, 50%); color: hsl(210, 100%, 95%); } .table_month_vert tr:nth-child(n + 6) td.day { background-color: hsl(340, 100%, 95%); color: hsl(340, 100%, 50%); } .table_month_vert tr:nth-child(1) th { text-align: center; } table.horizontal td { background-image: -webkit-linear-gradient(top left, #FF0000, #0060BF); background-image: linear-gradient(to bottom right, #FF0000, #0060BF); } </style> </head> <body> <div id="num_year"></div> <div id="month"> <div id="month_name"></div> <table class="table_month_vert"></table><br> <table class="table_month_gor"></table> </div> <script> var calendar = { update: function(year, month) { this.year = year; this.month = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь', ][month]; var startDay = new Date(year, month, 1); var offsetDay = (startDay.getDay() || 7) - 1; startDay.setDate(startDay.getDate() - offsetDay); var lastDay = new Date(startDay); var days = new Date(year, month + 1, 0).getDate(); days = Math.ceil((days + offsetDay) / 7) * 7; lastDay.setDate(lastDay.getDate() + days); this.data = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']; while (startDay < lastDay) { this.data.push(startDay.getDate()); startDay.setHours(24); } }, render: function(horizontal) { var html = ''; if (horizontal) { this.element.classList.add("horizontal"); for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) { if (j == 0) html += '<tr class="week">'; html += '<td class="day">' + this.data[i] + '</td>'; if (j == 6) html += '</td>'; } } else { html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>']; for (var i = 0; i < this.data.length; i++) { html[i % 7] += '<td class="day">' + this.data[i]; } html = html.join('') } this.numYear.textContent = this.year; this.monthName.textContent = this.month; this.element.innerHTML = html; }, }; var today = new Date(), thisYear = today.getFullYear(), thisMonth = today.getMonth(); calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']; calendar.numYear = document.querySelector('#num_year'); calendar.monthName = document.querySelector('#month_name'); calendar.element = document.querySelector('.table_month_vert'); calendar.update(thisYear, thisMonth); calendar.render(true); calendar.element = document.querySelector('.table_month_gor'); calendar.render(); </script> </body> </html> |
рони,
:thanks: будем пробовать разобраться :write: :-) |
почему скрипт не работает, если со страницы удалить id="num_year", id="month_name", class="table_month_vert"? как это можно исправить?
почему поле ввода пустое? почему при выборе другого месяца в селекте ничего не меняется? как сделать чтобы можно было посмотреть за другой месяц/год? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #navigation_panel { white-space: nowrap; border: 1px solid hsl(0, 0%, 50%); border-radius: 6px; padding: 5px 15px; margin: 0 0 5px; } input { width: 56px; display: inline-block; text-align: center; border: 1px solid hsl(210, 100%, 50%); } .table_rotate { border: 1px solid hsl(210, 100%, 50%); border-radius: 12px 12px 0 12px; background-color: hsl(210, 100%, 90%); color: hsl(210, 100%, 50%); } select { border: 1px solid hsl(210, 100%, 50%); background-color: hsl(210, 100%, 90%); color: hsl(210, 100%, 50%); } .table_month_horiz, .table_month_vert { width: 250px; height: 250px; border: 1px solid hsl(0, 0%, 50%); border-radius: 6px; } td { border: 1px solid hsl(0, 0%, 50%); border-radius: 6px; text-align: center; font: 14px serif; } #num_year, #month_name { background-color: hsl(210, 100%, 95%); color: hsl(210, 100%, 50%); font: bold 18px serif; text-align: center; } #num_year { width: 250px; border: 1px solid hsl(0, 0%, 50%); border-radius: 4px; padding: 5px; margin: 0 0 5px; } #month { display: inline-block; border: 1px solid hsl(0, 0%, 50%); border-radius: 8px; padding: 5px; width: 250px; } #month_name { border: 1px solid hsl(0, 0%, 50%); border-radius: 4px; padding: 5px; margin: 0 0 5px; } .table_month_vert, .table_month_horiz { table-layout: fixed; width: 100%; height: 250px; border-spacing: 3px; } .table_month_horiz tr td:nth-child(1) { width: 20%; background-color: hsl(210, 100%, 88%); color: hsl(210, 100%, 50%); font-weight: bold; } /* названия будних дней недели */ .table_month_horiz tr:nth-child(n+6) td:nth-child(1) { width: 20%; background-color: hsl(348, 100%, 88%); color: hsl(348, 100%, 50%); font-weight: bold; } /* названия выходных дней недели */ .table_month_horiz tr td:nth-child(n+2) { width: 20%; background-color: hsl(210, 100%, 95%); color: hsl(210, 100%, 50%); } /* будниe */ .table_month_horiz tr:nth-child(n+6) td:nth-child(n+2) { width: 20%; background-color: hsl(348, 100%, 95%); color: hsl(348, 100%, 50%); } /* выходныe */ .table_month_vert tr:nth-child(1) td.day { background-color: hsl(210, 100%, 88%); color: hsl(210, 100%, 50%); font-weight: bold; } /* названия будних дней недели */ .table_month_vert tr:nth-child(1) td.day:nth-child(n+6) { background-color: hsl(348, 100%, 88%); color: hsl(348, 100%, 50%); font-weight: bold; } /* названия выходных дней недели */ .table_month_vert tr:nth-child(n+2) td.day { background-color: hsl(210, 100%, 95%); color: hsl(210, 100%, 50%); } /* будниe */ .table_month_vert tr:nth-child(n+2) td.day:nth-child(n+6) { background-color: hsl(348, 100%, 95%); color: hsl(348, 100%, 50%); } /* выходныe */ </style> </head> <body> <div id="num_year"></div> <div id="month"> <div id="navigation_panel"> <select id="select_month"></select> <input class="year_input" type="number" value=""> <button class="table_rotate">➘</button> </div> <div id="month_name"></div> <table class="table_month_horiz"></table> <table class="table_month_vert"></table> </div> <script> var calendar = { update: function(year, month) { this.year = year; this.month = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь', ][month]; var startDay = new Date(year, month, 1); var offsetDay = (startDay.getDay() || 7) - 1; startDay.setDate(startDay.getDate() - offsetDay); var lastDay = new Date(startDay); var days = new Date(year, month + 1, 0).getDate(); days = Math.ceil((days + offsetDay) / 7) * 7; lastDay.setDate(lastDay.getDate() + days); this.data = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']; while (startDay < lastDay) { this.data.push(startDay.getDate()); startDay.setHours(24); } }, render: function(horiz) { var html = ''; if (horiz) { this.element.classList.add("horiz"); for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) { if (j == 0) html += '<tr class="week">'; html += '<td class="day">' + this.data[i] + '</td>'; if (j == 6) html += '</td>'; } } else { html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>']; for (var i = 0; i < this.data.length; i++) { html[i % 7] += '<td class="day">' + this.data[i]; } html = html.join('') } this.numYear.textContent = this.year; this.monthName.textContent = this.month; this.element.innerHTML = html; }, }; var today = new Date(), thisYear = today.getFullYear(), thisMonth = today.getMonth(); calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']; calendar.numYear = document.querySelector('#num_year'); calendar.monthName = document.querySelector('#month_name'); calendar.element = document.querySelector('.table_month_vert'); calendar.update(thisYear, thisMonth); calendar.render(true); calendar.element = document.querySelector('.table_month_horiz'); calendar.render(); //Запрашивается селектор по тегу select. Добавляются месяца. selector = document.querySelector('select'); month_list = ['Январь', 'Февраль', 'Март', 'Апрель', ' Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']; for (var i = 0; i < month_list.length; i++){ selector.options[i] = new Option(month_list[i], i); } selector.selectedIndex = thisMonth; //Это для того, чтобы менять календарь при изменении месяца и года selector.addEventListener('change', load); document.querySelector('.year_input').addEventListener('change', load); calendar.element = document.querySelector('.month'); document.getElementById('month_rotate').addEventListener('click', function() { calendar.toggle(); }); //Вынесена загрузка в отдельную функцию. function load(){ var year = document.getElementById('year_input').value; var month = selector.selectedIndex; calendar.update(year, month); calendar.render(); } //при зыгрузке страницы вызывается тот же обработчик document.addEventListener("DOMContentLoaded", ()=>{ document.querySelector('.year_input').value = thisYear; load(); }); </script> </body> </html> |
другими словами как сделать чтобы наличие или отсутствие элемента в html-коде не влияло на отображение других элементов?
|
Блондинка,
проверить есть элемент или нет, есть что-то делаем, нет ничего. let elem = document.querySelector('.класс'); if(elem) { //... } |
так?
let elem = document.querySelector('.table_month_vert'); if(elem) { calendar.element = document.querySelector('.table_month_vert'); } |
Блондинка,
да |
Цитата:
и что не так с полем ввода, почему не показывает текущий год и нету навигации, просмотра других месяцев? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #navigation_panel { white-space: nowrap; border: 1px solid hsl(0, 0%, 50%); border-radius: 6px; padding: 5px 15px; margin: 0 0 5px; } input { width: 56px; display: inline-block; text-align: center; border: 1px solid hsl(210, 100%, 50%); } .table_rotate { border: 1px solid hsl(210, 100%, 50%); border-radius: 12px 12px 0 12px; background-color: hsl(210, 100%, 90%); color: hsl(210, 100%, 50%); } select { border: 1px solid hsl(210, 100%, 50%); background-color: hsl(210, 100%, 90%); color: hsl(210, 100%, 50%); } .table_month_horiz, .table_month_vert { width: 250px; height: 250px; border: 1px solid hsl(0, 0%, 50%); border-radius: 6px; } td { border: 1px solid hsl(0, 0%, 50%); border-radius: 6px; text-align: center; font: 14px serif; } #num_year, #month_name { background-color: hsl(210, 100%, 95%); color: hsl(210, 100%, 50%); font: bold 18px serif; text-align: center; } #num_year { width: 250px; border: 1px solid hsl(0, 0%, 50%); border-radius: 4px; padding: 5px; margin: 0 0 5px; } #month { display: inline-block; border: 1px solid hsl(0, 0%, 50%); border-radius: 8px; padding: 5px; width: 250px; } #month_name { border: 1px solid hsl(0, 0%, 50%); border-radius: 4px; padding: 5px; margin: 0 0 5px; } .table_month_vert, .table_month_horiz { table-layout: fixed; width: 100%; height: 250px; border-spacing: 3px; } .table_month_horiz tr td:nth-child(1) { width: 20%; background-color: hsl(210, 100%, 88%); color: hsl(210, 100%, 50%); font-weight: bold; } /* названия будних дней недели */ .table_month_horiz tr:nth-child(n+6) td:nth-child(1) { width: 20%; background-color: hsl(348, 100%, 88%); color: hsl(348, 100%, 50%); font-weight: bold; } /* названия выходных дней недели */ .table_month_horiz tr td:nth-child(n+2) { width: 20%; background-color: hsl(210, 100%, 95%); color: hsl(210, 100%, 50%); } /* будниe */ .table_month_horiz tr:nth-child(n+6) td:nth-child(n+2) { width: 20%; background-color: hsl(348, 100%, 95%); color: hsl(348, 100%, 50%); } /* выходныe */ .table_month_vert tr:nth-child(1) td.day { background-color: hsl(210, 100%, 88%); color: hsl(210, 100%, 50%); font-weight: bold; } /* названия будних дней недели */ .table_month_vert tr:nth-child(1) td.day:nth-child(n+6) { background-color: hsl(348, 100%, 88%); color: hsl(348, 100%, 50%); font-weight: bold; } /* названия выходных дней недели */ .table_month_vert tr:nth-child(n+2) td.day { background-color: hsl(210, 100%, 95%); color: hsl(210, 100%, 50%); } /* будниe */ .table_month_vert tr:nth-child(n+2) td.day:nth-child(n+6) { background-color: hsl(348, 100%, 95%); color: hsl(348, 100%, 50%); } /* выходныe */ </style> </head> <body> <div id="num_year"></div> <div id="month"> <div id="navigation_panel"> <select id="select_month"></select> <input class="year_input" type="number" value=""> <button class="table_rotate">➘</button> </div> <div id="month_name"></div> <table class="table_month_horiz"></table> </div> <script> var calendar = { update: function(year, month) { this.year = year; this.month = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь', ][month]; var startDay = new Date(year, month, 1); var offsetDay = (startDay.getDay() || 7) - 1; startDay.setDate(startDay.getDate() - offsetDay); var lastDay = new Date(startDay); var days = new Date(year, month + 1, 0).getDate(); days = Math.ceil((days + offsetDay) / 7) * 7; lastDay.setDate(lastDay.getDate() + days); this.data = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']; while (startDay < lastDay) { this.data.push(startDay.getDate()); startDay.setHours(24); } }, render: function(horiz) { var html = ''; if (horiz) { this.element.classList.add("horiz"); for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) { if (j == 0) html += '<tr class="week">'; html += '<td class="day">' + this.data[i] + '</td>'; if (j == 6) html += '</td>'; } } else { html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>']; for (var i = 0; i < this.data.length; i++) { html[i % 7] += '<td class="day">' + this.data[i]; } html = html.join('') } this.numYear.textContent = this.year; this.monthName.textContent = this.month; this.element.innerHTML = html; }, }; var today = new Date(), thisYear = today.getFullYear(), thisMonth = today.getMonth(); calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']; calendar.numYear = document.querySelector('#num_year'); calendar.monthName = document.querySelector('#month_name'); let elem = document.querySelector('.table_month_vert'); if(elem) { calendar.element = document.querySelector('.table_month_vert'); }; calendar.update(thisYear, thisMonth); calendar.render(true); calendar.element = document.querySelector('.table_month_horiz'); calendar.render(); //Запрашивается селектор по тегу select. Добавляются месяца. selector = document.querySelector('select'); month_list = ['Январь', 'Февраль', 'Март', 'Апрель', ' Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']; for (var i = 0; i < month_list.length; i++){ selector.options[i] = new Option(month_list[i], i); } selector.selectedIndex = thisMonth; //Это для того, чтобы менять календарь при изменении месяца и года selector.addEventListener('change', load); document.querySelector('.year_input').addEventListener('change', load); calendar.element = document.querySelector('.month'); document.getElementById('month_rotate').addEventListener('click', function() { calendar.toggle(); }); //Вынесена загрузка в отдельную функцию. function load(){ var year = document.getElementById('year_input').value; var month = selector.selectedIndex; calendar.update(year, month); calendar.render(); } //при зыгрузке страницы вызывается тот же обработчик document.addEventListener("DOMContentLoaded", ()=>{ document.querySelector('.year_input').value = thisYear; load(); }); </script> </body> </html> |
и как поменять класс таблице при клике на кнопку?
|
Цитата:
|
Часовой пояс GMT +3, время: 09:44. |