как отследить данные, из поля ввода
подскажите как отследить год, введенный в поле ввода, и в зависимости от этого присвоить переменной razn разные значения?
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> div { width: 70%; border: 1px solid #a9a9a9; border-radius: 12px/9px; padding: 10px 25px; margin: 0 20px 5px 0; } span.title { color: hsl(210,100%,50%); } span.ulian { color: hsl(240,100%,70%); } span.grig { color: hsl(240,100%,30%); } input { display: inline-block; /* без свойства display не во всех браузерах работает выравнивание в полях ввода */ text-align: center; } </style> </head> <body> <div> <input id="YearEntry" type="number" min="326" max="4099" step="1" value=""/> </div> <div id="Catholic_Easter"> <span class="title">Католическая пасха<br></span> <span class="grig"><span id="Catholic_Easter_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="Catholic_Easter_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="Maslenitsa_Catholic"> <span class="title">Католическая масленица<br></span> <span class="grig"><span id="Maslenitsa_Catholic_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="Maslenitsa_Catholic_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="palm_Sunday_Catholic"> <span class="title">Католическое вербное воскресенье<br></span> <span class="grig"><span id="palm_Sunday_Catholic_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="palm_Sunday_Catholic_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="Catholic_Radunitsa"> <span class="title">Католическая радуница<br></span> <span class="grig"><span id="Catholic_Radunitsa_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="Catholic_Radunitsa_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="Catholic_Trinity"> <span class="title">Католическая троица<br></span> <span class="grig"><span id="Catholic_Trinity_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="Catholic_Trinity_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="Orthodox_Easter"> <span class="title">Православная пасха<br></span> <span class="grig"><span id="Orthodox_Easter_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="Orthodox_Easter_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="Maslenitsa_Orthodox"> <span class="title">Православная масленица<br></span> <span class="grig"><span id="Maslenitsa_Orthodox_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="Maslenitsa_Orthodox_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="palm_Sunday_Orthodox"> <span class="title">Православное вербное воскресенье<br></span> <span class="grig"><span id="palm_Sunday_Orthodox_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="palm_Sunday_Orthodox_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="Orthodox_Radunitsa"> <span class="title">Православная радуница<br></span> <span class="grig"><span id="Orthodox_Radunitsa_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="Orthodox_Radunitsa_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="Orthodox_Trinity"> <span class="title">Православная троица<br></span> <span class="grig"><span id="Orthodox_Trinity_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="Orthodox_Trinity_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div> Первый Никейский собор — собор Церкви, созванный императором Константином I; состоялся в июне 325 года в городе Никее (ныне Изник, Турция); продолжался больше двух месяцев и стал первым Вселенским собором в истории христианства. </div> <script> function catholicDate(year) { // https://ru.wikipedia.org/wiki/Алгоритм_Гаусса_вычисления_даты_Пасхи var a = year % 19, b = year % 4, c = year % 7, k = Math.floor(year / 100), p = Math.floor((13 + 8 * k) / 25), q = Math.floor(k / 4), m = (15 - p + k - q) % 30, n = (4 + k - q) % 7, d = (19 * a + m) % 30, e = (2 * b + 4 * c + 6 * d + n) % 7; if (d === 29 && e === 6) return new Date(year, 3, 19); if (d === 28 && e === 6 && ((11 * m + 11) % 30 < 19)) return new Date(year, 3, 18); if (d + e > 9) return new Date(year, 3, d + e - 9); else return new Date(year, 2, 22 + d + e); } function orthodoxDate(year) { // https://ru.wikipedia.org/wiki/Алгоритм_Гаусса_вычисления_даты_Пасхи var a = year % 19, b = year % 4, c = year % 7, d = (19 * a + 15) % 30, e = (2 * b + 4 * c + 6 * d + 6) % 7, f = d + e; // (по старому стилю) Если f ≤ 9, то Пасха будет праздноваться 22 + f марта; если f > 9, то Пасха будет праздноваться f — 9 апреля. return f <= 9 ? new Date(year, 2, 22 + f) : new Date(year, 3, f - 9); } function Catholic_Easter(dt, days) { const msday = 24*60*60*1000; // мс в сутках return new Date(dt.getTime() + days * msday); } function Orthodox_Easter(dt, days) { const msday = 24*60*60*1000; // мс в сутках return new Date(dt.getTime() + days * msday); } razn = 0, if (year >= 300 && year <= 499) razn = 1; else if (year >= 500 && year <= 599) razn = 2; else if (year >= 600 && year <= 699) razn = 3; else if (year >= 700 && year <= 899) razn = 4; else if (year >= 900 && year <= 999) razn = 5; else if (year >= 1000 && year <= 1099) razn = 6; else if (year >= 1100 && year <= 1299) razn = 7; else if (year >= 1300 && year <= 1399) razn = 8; else if (year >= 1400 && year <= 1499) razn = 9; else if (year >= 1500 && year <= 1699) razn = 10; else if (year >= 1700 && year <= 1799) razn = 11; else if (year >= 1800 && year <= 1899) razn = 12; else if (year >= 1900 && year <= 2099) razn = 13; else if (year >= 2100 && year <= 2199) razn = 14; else if (year >= 2200 && year <= 2299) razn = 15; else if (year >= 2300 && year <= 2399) razn = 16; else if (year >= 2500 && year <= 2599) razn = 17; else if (year >= 2600 && year <= 2699) razn = 18; else if (year >= 2700 && year <= 2899) razn = 19; else if (year >= 2900 && year <= 2999) razn = 20; // Все даты по григорианскому календарю отображаем в едином формате function formatDate(date) { return date.toLocaleDateString("ru", { weekday: "long", day: "numeric", month: "long", year: "numeric" }).replace(/^.?|,/g, function(v, i) { return !i ? v.toUpperCase() : '<br>' }); } // Все даты по юлианскому календарю отображаем в едином формате function formatDate_ul(date) { var weekday = "Воскресенье,Понедельник,Вторник,Среда,Четверг,Пятница,Суббота".split(",")[(date.getDay()+razn)%7] +"<br>"; return weekday + date.toLocaleDateString("ru", { day: "numeric", month: "long", year: "numeric" }); } document.addEventListener("DOMContentLoaded", document_domcontentloaded); function document_domcontentloaded() { document.getElementById("YearEntry").value = new Date().getFullYear(); output(); document.getElementById("YearEntry").oninput = output; } function output() { const year = document.getElementById("YearEntry").value; const cathDate = catholicDate(year), orthDate = orthodoxDate(year); document.getElementById("Catholic_Easter_gr").innerHTML = formatDate(cathDate); document.getElementById("Maslenitsa_Catholic_gr").innerHTML = formatDate(Catholic_Easter(cathDate, -49)); document.getElementById("palm_Sunday_Catholic_gr").innerHTML = formatDate(Catholic_Easter(cathDate, -7)); document.getElementById("Catholic_Radunitsa_gr").innerHTML = formatDate(Catholic_Easter(cathDate, 9)); document.getElementById("Catholic_Trinity_gr").innerHTML = formatDate(Catholic_Easter(cathDate, 49)); document.getElementById("Catholic_Easter_ul").innerHTML = formatDate_ul(Catholic_Easter(cathDate, -razn)); document.getElementById("Maslenitsa_Catholic_ul").innerHTML = formatDate_ul(Catholic_Easter(cathDate, -razn -49)); document.getElementById("palm_Sunday_Catholic_ul").innerHTML = formatDate_ul(Catholic_Easter(cathDate, -razn -7)); document.getElementById("Catholic_Radunitsa_ul").innerHTML = formatDate_ul(Catholic_Easter(cathDate, -razn +9)); document.getElementById("Catholic_Trinity_ul").innerHTML = formatDate_ul(Catholic_Easter(cathDate, -razn +49)); document.getElementById("Orthodox_Easter_gr").innerHTML = formatDate(Orthodox_Easter(orthDate, +razn)); document.getElementById("Maslenitsa_Orthodox_gr").innerHTML = formatDate(Orthodox_Easter(orthDate, +razn -49)); document.getElementById("palm_Sunday_Orthodox_gr").innerHTML = formatDate(Orthodox_Easter(orthDate, +razn -7)); document.getElementById("Orthodox_Radunitsa_gr").innerHTML = formatDate(Orthodox_Easter(orthDate, +razn +9)); document.getElementById("Orthodox_Trinity_gr").innerHTML = formatDate(Orthodox_Easter(orthDate, +razn +49)); document.getElementById("Orthodox_Easter_ul").innerHTML = formatDate_ul(orthodoxDate(year)); document.getElementById("Maslenitsa_Orthodox_ul").innerHTML = formatDate_ul(Orthodox_Easter(orthDate, -49)); document.getElementById("palm_Sunday_Orthodox_ul").innerHTML = formatDate_ul(Orthodox_Easter(orthDate, -7)); document.getElementById("Orthodox_Radunitsa_ul").innerHTML = formatDate_ul(Orthodox_Easter(orthDate, 9)); document.getElementById("Orthodox_Trinity_ul").innerHTML = formatDate_ul(Orthodox_Easter(orthDate, 49)); } </script> </body> </html> |
попробовала вместо переменной вставить 13(разница дней между календарями в настоящий период), скрипт прекрасно работает, и всё высчитывает правильно, но проблема в том, что разница между календарями в разные периоды времени не постоянна...
|
SOS
|
есть year как значение года, введённое пользователем, появляется в функции output. Там же проводятся расчёты и выводится результат.
Значит, и вычисление razn через все эти else if тоже надо разместить в функции output. надо написать ещё одну, отдельную функцию, которая будет принимать год, а возвращать разницу дней, и эту функцию вызывать в теле output... |
Блондинка,
function getDifference(year) { var razn = 0; if (year >= 300 && year <= 499) razn = 1; else if (year >= 500 && year <= 599) razn = 2; else if (year >= 600 && year <= 699) razn = 3; else if (year >= 700 && year <= 899) razn = 4; else if (year >= 900 && year <= 999) razn = 5; else if (year >= 1000 && year <= 1099) razn = 6; else if (year >= 1100 && year <= 1299) razn = 7; else if (year >= 1300 && year <= 1399) razn = 8; else if (year >= 1400 && year <= 1499) razn = 9; else if (year >= 1500 && year <= 1699) razn = 10; else if (year >= 1700 && year <= 1799) razn = 11; else if (year >= 1800 && year <= 1899) razn = 12; else if (year >= 1900 && year <= 2099) razn = 13; else if (year >= 2100 && year <= 2199) razn = 14; else if (year >= 2200 && year <= 2299) razn = 15; else if (year >= 2300 && year <= 2399) razn = 16; else if (year >= 2500 && year <= 2599) razn = 17; else if (year >= 2600 && year <= 2699) razn = 18; else if (year >= 2700 && year <= 2899) razn = 19; else if (year >= 2900 && year <= 2999) razn = 20; return razn; } // Все даты по юлианскому календарю отображаем в едином формате function formatDate_ul(date) { var razn = getDifference(date.getFullYear()); var arrNameDay = "Воскресенье,Понедельник,Вторник,Среда,Четверг,Пятница,Суббота".split(","); var weekday = arrNameDay[(date.getDay() + razn) % 7] + "<br>"; return weekday + date.toLocaleDateString("ru", { day: "numeric", month: "long", year: "numeric" }); } |
рони,
если бы ты объяснил бы куда, после какой строки это вставить, а в идеале выложил весь js-код <script> ........... </script> было бы хорошо... :-? |
Блондинка,
я без понятия ... это была попытка угадать, помочь... |
рони,
внутри функции output, но где именно внутри? |
Блондинка,
возможно вы хотели так ... <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> div { width: 70%; border: 1px solid #a9a9a9; border-radius: 12px/9px; padding: 10px 25px; margin: 0 20px 5px 0; } span.title { color: hsl(210,100%,50%); } span.ulian { color: hsl(240,100%,70%); } span.grig { color: hsl(240,100%,30%); } input { display: inline-block; /* без свойства display не во всех браузерах работает выравнивание в полях ввода */ text-align: center; } </style> </head> <body> <div> <input id="YearEntry" type="number" min="326" max="4099" step="1" value=""/> </div> <div id="Catholic_Easter"> <span class="title">Католическая пасха<br></span> <span class="grig"><span id="Catholic_Easter_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="Catholic_Easter_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="Maslenitsa_Catholic"> <span class="title">Католическая масленица<br></span> <span class="grig"><span id="Maslenitsa_Catholic_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="Maslenitsa_Catholic_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="palm_Sunday_Catholic"> <span class="title">Католическое вербное воскресенье<br></span> <span class="grig"><span id="palm_Sunday_Catholic_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="palm_Sunday_Catholic_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="Catholic_Radunitsa"> <span class="title">Католическая радуница<br></span> <span class="grig"><span id="Catholic_Radunitsa_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="Catholic_Radunitsa_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="Catholic_Trinity"> <span class="title">Католическая троица<br></span> <span class="grig"><span id="Catholic_Trinity_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="Catholic_Trinity_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="Orthodox_Easter"> <span class="title">Православная пасха<br></span> <span class="grig"><span id="Orthodox_Easter_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="Orthodox_Easter_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="Maslenitsa_Orthodox"> <span class="title">Православная масленица<br></span> <span class="grig"><span id="Maslenitsa_Orthodox_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="Maslenitsa_Orthodox_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="palm_Sunday_Orthodox"> <span class="title">Православное вербное воскресенье<br></span> <span class="grig"><span id="palm_Sunday_Orthodox_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="palm_Sunday_Orthodox_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="Orthodox_Radunitsa"> <span class="title">Православная радуница<br></span> <span class="grig"><span id="Orthodox_Radunitsa_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="Orthodox_Radunitsa_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div id="Orthodox_Trinity"> <span class="title">Православная троица<br></span> <span class="grig"><span id="Orthodox_Trinity_gr"> </span><br> по григорианскому календарю (новый стиль)<br></span> <span class="ulian"><span id="Orthodox_Trinity_ul"> </span><br> по юлианскому календарю (старый стиль)</span> </div> <div> Первый Никейский собор — собор Церкви, созванный императором Константином I; состоялся в июне 325 года в городе Никее (ныне Изник, Турция); продолжался больше двух месяцев и стал первым Вселенским собором в истории христианства. </div> <script> function catholicDate(year) { // https://ru.wikipedia.org/wiki/Алгоритм_Гаусса_вычисления_даты_Пасхи var a = year % 19, b = year % 4, c = year % 7, k = Math.floor(year / 100), p = Math.floor((13 + 8 * k) / 25), q = Math.floor(k / 4), m = (15 - p + k - q) % 30, n = (4 + k - q) % 7, d = (19 * a + m) % 30, e = (2 * b + 4 * c + 6 * d + n) % 7; if (d === 29 && e === 6) return new Date(year, 3, 19); if (d === 28 && e === 6 && ((11 * m + 11) % 30 < 19)) return new Date(year, 3, 18); if (d + e > 9) return new Date(year, 3, d + e - 9); else return new Date(year, 2, 22 + d + e); } function orthodoxDate(year) { // https://ru.wikipedia.org/wiki/Алгоритм_Гаусса_вычисления_даты_Пасхи var a = year % 19, b = year % 4, c = year % 7, d = (19 * a + 15) % 30, e = (2 * b + 4 * c + 6 * d + 6) % 7, f = d + e; // (по старому стилю) Если f ≤ 9, то Пасха будет праздноваться 22 + f марта; если f > 9, то Пасха будет праздноваться f — 9 апреля. return f <= 9 ? new Date(year, 2, 22 + f) : new Date(year, 3, f - 9); } function Catholic_Easter(dt, days) { const msday = 24*60*60*1000; // мс в сутках return new Date(dt.getTime() + days * msday); } function Orthodox_Easter(dt, days) { const msday = 24*60*60*1000; // мс в сутках return new Date(dt.getTime() + days * msday); } // Все даты по григорианскому календарю отображаем в едином формате function formatDate(date) { return date.toLocaleDateString("ru", { weekday: "long", day: "numeric", month: "long", year: "numeric" }).replace(/^.?|,/g, function(v, i) { return !i ? v.toUpperCase() : '<br>' }); } function getDifference(year) { var razn = 0; if (year >= 300 && year <= 499) razn = 1; else if (year >= 500 && year <= 599) razn = 2; else if (year >= 600 && year <= 699) razn = 3; else if (year >= 700 && year <= 899) razn = 4; else if (year >= 900 && year <= 999) razn = 5; else if (year >= 1000 && year <= 1099) razn = 6; else if (year >= 1100 && year <= 1299) razn = 7; else if (year >= 1300 && year <= 1399) razn = 8; else if (year >= 1400 && year <= 1499) razn = 9; else if (year >= 1500 && year <= 1699) razn = 10; else if (year >= 1700 && year <= 1799) razn = 11; else if (year >= 1800 && year <= 1899) razn = 12; else if (year >= 1900 && year <= 2099) razn = 13; else if (year >= 2100 && year <= 2199) razn = 14; else if (year >= 2200 && year <= 2299) razn = 15; else if (year >= 2300 && year <= 2399) razn = 16; else if (year >= 2500 && year <= 2599) razn = 17; else if (year >= 2600 && year <= 2699) razn = 18; else if (year >= 2700 && year <= 2899) razn = 19; else if (year >= 2900 && year <= 2999) razn = 20; return razn; } // Все даты по юлианскому календарю отображаем в едином формате function formatDate_ul(date) { var razn = getDifference(date.getFullYear()); var arrNameDay = "Воскресенье,Понедельник,Вторник,Среда,Четверг,Пятница,Суббота".split(","); var weekday = arrNameDay[(date.getDay() + razn) % 7] + "<br>"; return weekday + date.toLocaleDateString("ru", { day: "numeric", month: "long", year: "numeric" }); } document.addEventListener("DOMContentLoaded", document_domcontentloaded); function document_domcontentloaded() { document.getElementById("YearEntry").value = new Date().getFullYear(); output(); document.getElementById("YearEntry").oninput = output; } function output() { const year = document.getElementById("YearEntry").value; var razn = getDifference(year); const cathDate = catholicDate(year), orthDate = orthodoxDate(year); document.getElementById("Catholic_Easter_gr").innerHTML = formatDate(cathDate); document.getElementById("Maslenitsa_Catholic_gr").innerHTML = formatDate(Catholic_Easter(cathDate, -49)); document.getElementById("palm_Sunday_Catholic_gr").innerHTML = formatDate(Catholic_Easter(cathDate, -7)); document.getElementById("Catholic_Radunitsa_gr").innerHTML = formatDate(Catholic_Easter(cathDate, 9)); document.getElementById("Catholic_Trinity_gr").innerHTML = formatDate(Catholic_Easter(cathDate, 49)); document.getElementById("Catholic_Easter_ul").innerHTML = formatDate_ul(Catholic_Easter(cathDate, -razn)); document.getElementById("Maslenitsa_Catholic_ul").innerHTML = formatDate_ul(Catholic_Easter(cathDate, -razn -49)); document.getElementById("palm_Sunday_Catholic_ul").innerHTML = formatDate_ul(Catholic_Easter(cathDate, -razn -7)); document.getElementById("Catholic_Radunitsa_ul").innerHTML = formatDate_ul(Catholic_Easter(cathDate, -razn +9)); document.getElementById("Catholic_Trinity_ul").innerHTML = formatDate_ul(Catholic_Easter(cathDate, -razn +49)); document.getElementById("Orthodox_Easter_gr").innerHTML = formatDate(Orthodox_Easter(orthDate, +razn)); document.getElementById("Maslenitsa_Orthodox_gr").innerHTML = formatDate(Orthodox_Easter(orthDate, +razn -49)); document.getElementById("palm_Sunday_Orthodox_gr").innerHTML = formatDate(Orthodox_Easter(orthDate, +razn -7)); document.getElementById("Orthodox_Radunitsa_gr").innerHTML = formatDate(Orthodox_Easter(orthDate, +razn +9)); document.getElementById("Orthodox_Trinity_gr").innerHTML = formatDate(Orthodox_Easter(orthDate, +razn +49)); document.getElementById("Orthodox_Easter_ul").innerHTML = formatDate_ul(orthodoxDate(year)); document.getElementById("Maslenitsa_Orthodox_ul").innerHTML = formatDate_ul(Orthodox_Easter(orthDate, -49)); document.getElementById("palm_Sunday_Orthodox_ul").innerHTML = formatDate_ul(Orthodox_Easter(orthDate, -7)); document.getElementById("Orthodox_Radunitsa_ul").innerHTML = formatDate_ul(Orthodox_Easter(orthDate, 9)); document.getElementById("Orthodox_Trinity_ul").innerHTML = formatDate_ul(Orthodox_Easter(orthDate, 49)); } </script> </body> </html> |
рони,
:thanks: |
Блондинка,
на всякий случай const year = +document.getElementById("YearEntry").value; |
рони,
зачем? просто объясни на словах, чтоб я поняла, вроде всё работает и так... |
Блондинка,
без плюса это не число, а строка, а значит 8 ,может быть, больше чем 20. alert("8" > "20"); |
тут возник вопрос как лучше сверстать html код, в одном блоке находиться десять блоков, как лучше их расположить как в таблице, 2×5, тоесть обе пасхи расположить в ряд, чтобы потом можно было удалить скриптом колонку таблицы с католическими праздниками, и чтобы высота ячеек-блоков была одинакова, что и как лучше использовать грид флексбокс или простую таблицу... ?
|
Блондинка,
что вам проще) или CSS Grid |
попробую объяснить проще, если у таблицы ширина 100 %, то если в строке tr удалить одну из двух ячеек, то просто изменится ширина ячейки...
и высота ячеек в строке всегда одинакова, использовать флекбокс не получится, только грид или таблицы... ??? |
или используя флексбокс, расположить два блока в ряд задав по 50% ширины, а потом в оба эти блоки поместить по пять блоков, расположив в столбик и задав каждому по 20% высоты...
так что нибудь получится? |
Блондинка,
да |
рони,
если в скрипте заменить document.getElementById на document.getElementByClass то можно будет выводить даты эти по несколько раз на странице ведь... тогда проще создать два дива, в одном с таблицей, в другом просто с 5 блоками и скрывать один из двух блоков в зависимости от введённого года, наверное это самый простой и кросбраузерный вариант... |
рони,
если на странице использовать класс вместо ид, то надо в скрипте искать вместо getElementById это getElementsByClassName ? |
Блондинка,
вызубрить, понять, обрести нирвану тут Поиск: getElement*, querySelector* после просветления использовать querySelectorAll("точка_класс")[индекс, который по списку] |
рони,
<script> function catholicDate(year) { // [url]https://ru.wikipedia.org/wiki/Алгоритм_Гаусса_вычисления_даты_Пасхи[/url] var a = year % 19, b = year % 4, c = year % 7, k = Math.floor(year / 100), p = Math.floor((13 + 8 * k) / 25), q = Math.floor(k / 4), m = (15 - p + k - q) % 30, n = (4 + k - q) % 7, d = (19 * a + m) % 30, e = (2 * b + 4 * c + 6 * d + n) % 7; if (d === 29 && e === 6) return new Date(year, 3, 19); if (d === 28 && e === 6 && ((11 * m + 11) % 30 < 19)) return new Date(year, 3, 18); if (d + e > 9) return new Date(year, 3, d + e - 9); else return new Date(year, 2, 22 + d + e); } function orthodoxDate(year) { // [url]https://ru.wikipedia.org/wiki/Алгоритм_Гаусса_вычисления_даты_Пасхи[/url] var a = year % 19, b = year % 4, c = year % 7, d = (19 * a + 15) % 30, e = (2 * b + 4 * c + 6 * d + 6) % 7, f = d + e; // (по старому стилю) Если f ≤ 9, то Пасха будет праздноваться 22 + f марта; если f > 9, то Пасха будет праздноваться f — 9 апреля. return f <= 9 ? new Date(year, 2, 22 + f) : new Date(year, 3, f - 9); } function Catholic_Easter(dt, days) { const msday = 24*60*60*1000; // мс в сутках return new Date(dt.getTime() + days * msday); } function Orthodox_Easter(dt, days) { const msday = 24*60*60*1000; // мс в сутках return new Date(dt.getTime() + days * msday); } // Все даты по григорианскому календарю<br>отображаем в едином формате function formatDate(date) { return date.toLocaleDateString("ru", { weekday: "long", day: "numeric", month: "long", year: "numeric" }).replace(/^.?|,/g, function(v, i) { return !i ? v.toUpperCase() : '<br>' }); } function getDifference(year) { var razn = 0; if (year >= 300 && year <= 499) razn = 1; else if (year >= 500 && year <= 599) razn = 2; else if (year >= 600 && year <= 699) razn = 3; else if (year >= 700 && year <= 899) razn = 4; else if (year >= 900 && year <= 999) razn = 5; else if (year >= 1000 && year <= 1099) razn = 6; else if (year >= 1100 && year <= 1299) razn = 7; else if (year >= 1300 && year <= 1399) razn = 8; else if (year >= 1400 && year <= 1499) razn = 9; else if (year >= 1500 && year <= 1699) razn = 10; else if (year >= 1700 && year <= 1799) razn = 11; else if (year >= 1800 && year <= 1899) razn = 12; else if (year >= 1900 && year <= 2099) razn = 13; else if (year >= 2100 && year <= 2199) razn = 14; else if (year >= 2200 && year <= 2299) razn = 15; else if (year >= 2300 && year <= 2399) razn = 16; else if (year >= 2500 && year <= 2599) razn = 17; else if (year >= 2600 && year <= 2699) razn = 18; else if (year >= 2700 && year <= 2899) razn = 19; else if (year >= 2900 && year <= 2999) razn = 20; else if (year >= 3000 && year <= 3099) razn = 21; else if (year >= 3100 && year <= 3299) razn = 22; else if (year >= 3300 && year <= 3399) razn = 23; else if (year >= 3400 && year <= 3499) razn = 24; else if (year >= 3500 && year <= 3699) razn = 25; else if (year >= 3700 && year <= 3799) razn = 26; else if (year >= 3800 && year <= 3899) razn = 27; else if (year >= 3900 && year <= 4099) razn = 28; return razn; } // Все даты по юлианскому календарю<br>отображаем в едином формате function formatDate_ul(date) { var razn = getDifference(date.getFullYear()); var arrNameDay = "Воскресенье,Понедельник,Вторник,Среда,Четверг,Пятница,Суббота".split(","); var weekday = arrNameDay[(date.getDay() + razn) % 7] + "<br>"; return weekday + date.toLocaleDateString("ru", { day: "numeric", month: "long", year: "numeric" }); } document.addEventListener("DOMContentLoaded", document_domcontentloaded); function document_domcontentloaded() { document.getElementById("YearEntry").value = new Date().getFullYear(); output(); document.getElementById("YearEntry").oninput = output; } function output() { const year = +document.getElementById("YearEntry").value var razn = getDifference(year); const cathDate = catholicDate(year), orthDate = orthodoxDate(year); document.querySelectorAll(".Catholic_Easter_gr").innerHTML = formatDate(cathDate); document.querySelectorAll(".Maslenitsa_Catholic_gr").innerHTML = formatDate(Catholic_Easter(cathDate, -49)); document.querySelectorAll(".palm_Sunday_Catholic_gr").innerHTML = formatDate(Catholic_Easter(cathDate, -7)); document.querySelectorAll(".Catholic_Radunitsa_gr").innerHTML = formatDate(Catholic_Easter(cathDate, 9)); document.querySelectorAll(".Catholic_Trinity_gr").innerHTML = formatDate(Catholic_Easter(cathDate, 49)); document.querySelectorAll(".Catholic_Easter_ul").innerHTML = formatDate_ul(Catholic_Easter(cathDate, -razn)); document.querySelectorAll(".Maslenitsa_Catholic_ul").innerHTML = formatDate_ul(Catholic_Easter(cathDate, -razn -49)); document.querySelectorAll(".palm_Sunday_Catholic_ul").innerHTML = formatDate_ul(Catholic_Easter(cathDate, -razn -7)); document.querySelectorAll(".Catholic_Radunitsa_ul").innerHTML = formatDate_ul(Catholic_Easter(cathDate, -razn +9)); document.querySelectorAll(".Catholic_Trinity_ul").innerHTML = formatDate_ul(Catholic_Easter(cathDate, -razn +49)); document.querySelectorAll(".Orthodox_Easter_gr").innerHTML = formatDate(Orthodox_Easter(orthDate, +razn)); document.querySelectorAll(".Maslenitsa_Orthodox_gr").innerHTML = formatDate(Orthodox_Easter(orthDate, +razn -49)); document.querySelectorAll(".palm_Sunday_Orthodox_gr").innerHTML = formatDate(Orthodox_Easter(orthDate, +razn -7)); document.querySelectorAll(".Orthodox_Radunitsa_gr").innerHTML = formatDate(Orthodox_Easter(orthDate, +razn +9)); document.querySelectorAll(".Orthodox_Trinity_gr").innerHTML = formatDate(Orthodox_Easter(orthDate, +razn +49)); document.querySelectorAll(".Orthodox_Easter_ul").innerHTML = formatDate_ul(orthodoxDate(year)); document.querySelectorAll(".Maslenitsa_Orthodox_ul").innerHTML = formatDate_ul(Orthodox_Easter(orthDate, -49)); document.querySelectorAll(".palm_Sunday_Orthodox_ul").innerHTML = formatDate_ul(Orthodox_Easter(orthDate, -7)); document.querySelectorAll(".Orthodox_Radunitsa_ul").innerHTML = formatDate_ul(Orthodox_Easter(orthDate, 9)); document.querySelectorAll(".Orthodox_Trinity_ul").innerHTML = formatDate_ul(Orthodox_Easter(orthDate, 49)); } </script> попробовала так, и не работает... |
Блондинка,
если элемент один зачем использовать ALL ? если уж использовали то укажите какой элемент в списке вам нужен. document.querySelectorAll(".Catholic_Easter_gr")[0].innerHTML либо так document.querySelector(".Catholic_Easter_gr").innerHTML |
рони,
так если на странице несколько элементов с этим классом, и в каждом надо вывести что-то, мне дату... |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
но на всякий случай... <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .gr{ width: 200px; margin: 0 auto; } .gr > div{ display: flex; } .gr > div > span { border: 1px solid red; flex: 1; } </style> </head> <body> <div class="gr"> <div><span>1</span><span>1</span></div> <div><span>2</span><span>2</span></div> <div><span>3</span><span>3</span></div> <div><span>4</span><span>4</span></div> <div><span>5</span><span>5</span></div> </div> <script> let blocks = document.querySelectorAll(".gr > div"); blocks[2].querySelectorAll("span")[0].innerHTML = "3 ряд 1 span" blocks[4].querySelectorAll("span")[1].innerHTML = "5 ряд 2 span" </script> </body> </html> |
рони,
вот страница <body> <div id="input_t"> <input id="YearEntry" type="number" min="326" max="4099" step="1" value=""/> </div> <div id="e_325"> Введите с 326 по 4099 год.<br> Первый Никейский собор — собор Церкви, созванный императором Константином I; состоялся в июне 325 года в городе Никее (ныне Изник, Турция); продолжался больше двух месяцев и стал первым Вселенским собором в истории христианства. </div> <div id="Orthodox"> <div class="Orthodox_Easter"> <span class="title">Православная пасха<br></span> <span class="grig"><span class="Orthodox_Easter_gr"> </span><br> по григорианскому календарю<br>(новый стиль)<br></span> <span class="ulian"><span class="Orthodox_Easter_ul"> </span><br> по юлианскому календарю<br>(старый стиль)</span> </div> <div class="Maslenitsa_Orthodox"> <span class="title">Православная масленица<br></span> <span class="grig"><span class="Maslenitsa_Orthodox_gr"> </span><br> по григорианскому календарю<br>(новый стиль)<br></span> <span class="ulian"><span class="Maslenitsa_Orthodox_ul"> </span><br> по юлианскому календарю<br>(старый стиль)</span> </div> <div id="palm_Sunday_Orthodox"> <span class="title">Православное вербное воскресенье<br></span> <span class="grig"><span class="palm_Sunday_Orthodox_gr"> </span><br> по григорианскому календарю<br>(новый стиль)<br></span> <span class="ulian"><span class="palm_Sunday_Orthodox_ul"> </span><br> по юлианскому календарю<br>(старый стиль)</span> </div> <div class="Orthodox_Radunitsa"> <span class="title">Православная радуница<br></span> <span class="grig"><span class="Orthodox_Radunitsa_gr"> </span><br> по григорианскому календарю<br>(новый стиль)<br></span> <span class="ulian"><span class="Orthodox_Radunitsa_ul"> </span><br> по юлианскому календарю<br>(старый стиль)</span> </div> <div class="Orthodox_Trinity"> <span class="title">Православная троица<br></span> <span class="grig"><span class="Orthodox_Trinity_gr"> </span><br> по григорианскому календарю<br>(новый стиль)<br></span> <span class="ulian"><span class="Orthodox_Trinity_ul"> </span><br> по юлианскому календарю<br>(старый стиль)</span> </div> </div> <div id="Catholic" class=""> <table> <tr><td class="Catholic_Easter"> <span class="title">Католическая пасха<br></span> <span class="grig"><span class="Catholic_Easter_gr"> </span><br> по григорианскому календарю<br>(новый стиль)<br></span> <span class="ulian"><span class="Catholic_Easter_ul"> </span><br> по юлианскому календарю<br>(старый стиль)</span> </td> <td class="Orthodox_Easter"> <span class="title">Православная пасха<br></span> <span class="grig"><span class="Orthodox_Easter_gr"> </span><br> по григорианскому календарю<br>(новый стиль)<br></span> <span class="ulian"><span class="Orthodox_Easter_ul"> </span><br> по юлианскому календарю<br>(старый стиль)</span> </td></tr> <tr><td class="Maslenitsa_Catholic"> <span class="title">Католическая масленица<br></span> <span class="grig"><span class="Maslenitsa_Catholic_gr"> </span><br> по григорианскому календарю<br>(новый стиль)<br></span> <span class="ulian"><span class="Maslenitsa_Catholic_ul"> </span><br> по юлианскому календарю<br>(старый стиль)</span> </td> <td class="Maslenitsa_Orthodox"> <span class="title">Православная масленица<br></span> <span class="grig"><span class="Maslenitsa_Orthodox_gr"> </span><br> по григорианскому календарю<br>(новый стиль)<br></span> <span class="ulian"><span class="Maslenitsa_Orthodox_ul"> </span><br> по юлианскому календарю<br>(старый стиль)</span> </td> </tr> <tr><td class="palm_Sunday_Catholic"> <span class="title">Католическое вербное воскресенье<br></span> <span class="grig"><span class="palm_Sunday_Catholic_gr"> </span><br> по григорианскому календарю<br>(новый стиль)<br></span> <span class="ulian"><span class="palm_Sunday_Catholic_ul"> </span><br> по юлианскому календарю<br>(старый стиль)</span> </td> <td class="palm_Sunday_Orthodox"> <span class="title">Православное вербное воскресенье<br></span> <span class="grig"><span class="palm_Sunday_Orthodox_gr"> </span><br> по григорианскому календарю<br>(новый стиль)<br></span> <span class="ulian"><span class="palm_Sunday_Orthodox_ul"> </span><br> по юлианскому календарю<br>(старый стиль)</span> </td></tr> <tr><td class="Catholic_Radunitsa"> <span class="title">Католическая радуница<br></span> <span class="grig"><span class="Catholic_Radunitsa_gr"> </span><br> по григорианскому календарю<br>(новый стиль)<br></span> <span class="ulian"><span class="Catholic_Radunitsa_ul"> </span><br> по юлианскому календарю<br>(старый стиль)</span> </td> <td class="Orthodox_Radunitsa"> <span class="title">Православная радуница<br></span> <span class="grig"><span class="Orthodox_Radunitsa_gr"> </span><br> по григорианскому календарю<br>(новый стиль)<br></span> <span class="ulian"><span class="Orthodox_Radunitsa_ul"> </span><br> по юлианскому календарю<br>(старый стиль)</span> </td></tr> <tr><td class="Catholic_Trinity"> <span class="title">Католическая троица<br></span> <span class="grig"><span class="Catholic_Trinity_gr"> </span><br> по григорианскому календарю<br>(новый стиль)<br></span> <span class="ulian"><span class="Catholic_Trinity_ul"> </span><br> по юлианскому календарю<br>(старый стиль)</span> </td> <td class="Orthodox_Trinity"> <span class="title">Православная троица<br></span> <span class="grig"><span class="Orthodox_Trinity_gr"> </span><br> по григорианскому календарю<br>(новый стиль)<br></span> <span class="ulian"><span class="Orthodox_Trinity_ul"> </span><br> по юлианскому календарю<br>(старый стиль)</span> </td></tr> </table> </div> <div id="4100" class=""> Введите с 326 по 4099 год. </div><body> в диве выводится, в ячейке таблице пусто... |
Цитата:
Как вариант... function test(year) { if (year < 300) return 0; const a = [ 499, 599, 699, 899, 999, 1099, 1299, 1399, 1499, 1699, 1799, 1899, 2099, 2199, 2299, 2399, 2599, 2699, 2899, 2999, 3099, 3299, 3399, 3499, 3699, 3799, 3899, 4099 ] for (let i = 0; i < a.length; i++) { if (year < a[ i ]) return ++i } return 0 } alert(test(1000)) |
рони,
у нас есть 4 дива, и надо показать пользователю, только один из них, или <= 325, или до григорианского периода (только православные), или текущий период (католические и православные), или див с ошибкой >=4100 год... получается что православные праздники отображены дважды на странице, и второй раз они не показывают... |
Цитата:
если режет глаза, попробуй решить задачу, переменная равна 1 в 300 год, через сто лет она изменится, если год делится на 400 без остатка, то на 0 дней, если с остатком то увеличится на 1... |
Блондинка,
![]() |
SOS
|
Цитата:
А приставать с каждым вопросом "как мне написать мою программу" это плохой вариант. |
есть 4 блока с ид
id="er_325" // год <=325 id="pre-Gregorian_period" // период 326–1582 id="current_period" // период 1583–4099 id="er_4100" // период >=4100 как показать посетителю только один из этих блоков, а остальные скрыть? <script> function catholicDate(year) { // [url]https://ru.wikipedia.org/wiki/Алгоритм_Гаусса_вычисления_даты_Пасхи[/url] var a = year % 19, b = year % 4, c = year % 7, k = Math.floor(year / 100), p = Math.floor((13 + 8 * k) / 25), q = Math.floor(k / 4), m = (15 - p + k - q) % 30, n = (4 + k - q) % 7, d = (19 * a + m) % 30, e = (2 * b + 4 * c + 6 * d + n) % 7; if (d === 29 && e === 6) return new Date(year, 3, 19); if (d === 28 && e === 6 && ((11 * m + 11) % 30 < 19)) return new Date(year, 3, 18); if (d + e > 9) return new Date(year, 3, d + e - 9); else return new Date(year, 2, 22 + d + e); } function orthodoxDate(year) { // [url]https://ru.wikipedia.org/wiki/Алгоритм_Гаусса_вычисления_даты_Пасхи[/url] var a = year % 19, b = year % 4, c = year % 7, d = (19 * a + 15) % 30, e = (2 * b + 4 * c + 6 * d + 6) % 7, f = d + e; // (по старому стилю) Если f ≤ 9, то Пасха будет праздноваться 22 + f марта; если f > 9, то Пасха будет праздноваться f — 9 апреля. return f <= 9 ? new Date(year, 2, 22 + f) : new Date(year, 3, f - 9); } function Catholic_Easter(dt, days) { const msday = 24*60*60*1000; // мс в сутках return new Date(dt.getTime() + days * msday); } function Orthodox_Easter(dt, days) { const msday = 24*60*60*1000; // мс в сутках return new Date(dt.getTime() + days * msday); } // Все даты по григорианскому календарю<br>отображаем в едином формате function formatDate(date) { return date.toLocaleDateString("ru", { weekday: "long", day: "numeric", month: "long", year: "numeric" }).replace(/^.?|,/g, function(v, i) { return !i ? v.toUpperCase() : '<br>' }); } function getDifference(year) { var razn = 0; if (year >= 300 && year <= 499) razn = 1; else if (year >= 500 && year <= 599) razn = 2; else if (year >= 600 && year <= 699) razn = 3; else if (year >= 700 && year <= 899) razn = 4; else if (year >= 900 && year <= 999) razn = 5; else if (year >= 1000 && year <= 1099) razn = 6; else if (year >= 1100 && year <= 1299) razn = 7; else if (year >= 1300 && year <= 1399) razn = 8; else if (year >= 1400 && year <= 1499) razn = 9; else if (year >= 1500 && year <= 1699) razn = 10; else if (year >= 1700 && year <= 1799) razn = 11; else if (year >= 1800 && year <= 1899) razn = 12; else if (year >= 1900 && year <= 2099) razn = 13; else if (year >= 2100 && year <= 2199) razn = 14; else if (year >= 2200 && year <= 2299) razn = 15; else if (year >= 2300 && year <= 2399) razn = 16; else if (year >= 2500 && year <= 2599) razn = 17; else if (year >= 2600 && year <= 2699) razn = 18; else if (year >= 2700 && year <= 2899) razn = 19; else if (year >= 2900 && year <= 2999) razn = 20; else if (year >= 3000 && year <= 3099) razn = 21; else if (year >= 3100 && year <= 3299) razn = 22; else if (year >= 3300 && year <= 3399) razn = 23; else if (year >= 3400 && year <= 3499) razn = 24; else if (year >= 3500 && year <= 3699) razn = 25; else if (year >= 3700 && year <= 3799) razn = 26; else if (year >= 3800 && year <= 3899) razn = 27; else if (year >= 3900 && year <= 4099) razn = 28; return razn; } // Все даты по юлианскому календарю<br>отображаем в едином формате function formatDate_ul(date) { var razn = getDifference(date.getFullYear()); var arrNameDay = "Воскресенье,Понедельник,Вторник,Среда,Четверг,Пятница,Суббота".split(","); var weekday = arrNameDay[(date.getDay() + razn) % 7] + "<br>"; return weekday + date.toLocaleDateString("ru", { day: "numeric", month: "long", year: "numeric" }); } document.addEventListener("DOMContentLoaded", document_domcontentloaded); function document_domcontentloaded() { document.getElementById("YearEntry").value = new Date().getFullYear(); output(); document.getElementById("YearEntry").oninput = output; } function output() { function setContent(selector, content) { for (let element of document.getElementsByClassName(selector)) { element.innerHTML = content } } const year = +document.getElementById("YearEntry").value var razn = getDifference(year); const cathDate = catholicDate(year), orthDate = orthodoxDate(year); setContent("Catholic_Easter_gr", formatDate(cathDate)); setContent("Maslenitsa_Catholic_gr", formatDate(Catholic_Easter(cathDate, -49))); setContent("palm_Sunday_Catholic_gr", formatDate(Catholic_Easter(cathDate, -7))); setContent("Catholic_Radunitsa_gr", formatDate(Catholic_Easter(cathDate, 9))); setContent("Catholic_Trinity_gr", formatDate(Catholic_Easter(cathDate, 49))); setContent("Catholic_Easter_ul", formatDate_ul(Catholic_Easter(cathDate, -razn))); setContent("Maslenitsa_Catholic_ul", formatDate_ul(Catholic_Easter(cathDate, -razn -49))); setContent("palm_Sunday_Catholic_ul", formatDate_ul(Catholic_Easter(cathDate, -razn -7))); setContent("Catholic_Radunitsa_ul", formatDate_ul(Catholic_Easter(cathDate, -razn +9))); setContent("Catholic_Trinity_ul", formatDate_ul(Catholic_Easter(cathDate, -razn +49))); setContent("Orthodox_Easter_gr", formatDate(Orthodox_Easter(orthDate, +razn))); setContent("Maslenitsa_Orthodox_gr", formatDate(Orthodox_Easter(orthDate, +razn -49))); setContent("palm_Sunday_Orthodox_gr", formatDate(Orthodox_Easter(orthDate, +razn -7))); setContent("Orthodox_Radunitsa_gr", formatDate(Orthodox_Easter(orthDate, +razn +9))); setContent("Orthodox_Trinity_gr", formatDate(Orthodox_Easter(orthDate, +razn +49))); setContent("Orthodox_Easter_ul", formatDate_ul(orthodoxDate(year))); setContent("Maslenitsa_Orthodox_ul", formatDate_ul(Orthodox_Easter(orthDate, -49))); setContent("palm_Sunday_Orthodox_ul", formatDate_ul(Orthodox_Easter(orthDate, -7))); setContent("Orthodox_Radunitsa_ul", formatDate_ul(Orthodox_Easter(orthDate, 9))); setContent("Orthodox_Trinity_ul", formatDate_ul(Orthodox_Easter(orthDate, 49))); } </script> |
народ, кто может в этот скрипт добавить простую функцию, которая применит к трём блокам из 4ех (в зависимости от года введённого пользователем) свойство
display: none; |
S O S
|
рони,
:thanks: общими усилиями получен нужный скрипт, всем огромное спасибо, кто принимал участие... |
Часовой пояс GMT +3, время: 19:28. |