Форум

Блондинка · #61 (**permalink**) 07.12.2019, 04:28

laimas,
а возможно ли использовать более древние методы для изменения html-кода, а то не во всех браузерах срабатывает

laimas · #62 (**permalink**) 07.12.2019, 05:53

Что за древний ... Но ведь не только код добавлен, но CSS изменен, а "древние" и его селектор div:not(.box) не поймут. Поэтому, сейчас, все элементы div принадлежащие группе диапазона (даже ели он и один) обернуты в div, видимостью которого и управляется. Управление это будет не посредством css, а свойством hidden элемента.

Событие oninput также не имеет поддержки всеми браузерами и заменен на onkeyup. Заменен метод forEach и коллекция скрываемых блоков получается иным путем.

Все остальное не изменяется, но и кстати, метод toLocaleDateString() имеет базовую поддержку браузерами, а вот с опциями этого метода не у всех браузеров гут. А браузеры IE старых версий не поймут addEventListener(), то есть обработки установленных событий не будет. Возможны проблемы и с событием DOMContentLoaded (сейчас этот обработчик вообще убран - если js-скрипт определяется после html, то DOM будет доступен). Так что, если действительно проверять на всем зоопарке браузеров, то косяков будет уйма. Поэтому либо для всех, либо шлете боком браузеры без поддержки того или иного.

laimas · #63 (**permalink**) 07.12.2019, 05:54

Это с вышеуказанными изменениями:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div.box-range > div, div.box-input { width: 70%; border: 1px solid #a9a9a9; border-radius: 12px/9px; padding: 10px 25px; margin: 0 20px 5px 0; }
span.ulian { color: hsl(240,100%,70%); }
span.grig { color: hsl(240,100%,30%); }
input { display: inline-block; text-align: center; }
</style>
</head>
<body>

<div class="box-input">
    <input id="YearEntry" type="number" min="326" max="4099" step="1" value="2019" />
    <input id="button1" type="button" value="Расcчитать" />
</div>

<div class="box-range" range="[0,325]">
    <div>Первый Никейский собор — собор Церкви, созванный императором Константином I; состоялся в июне 325 года в городе Никее (ныне Изник, Турция); 
        продолжался больше двух месяцев и стал первым Вселенским собором в истории христианства.<br>
        Введите год с 326 по 4099
    </div>
</div>

<div class="box-range" range="[326,1582]">
    <div>
        Пасха<br>
        <span class="ulian">
        <span id="Orthodox_Easter_ul"></span><br>
        по юлианскому календарю (старый стиль)
        </span>
    </div>
    <div>
        Радуница<br>
        <span class="ulian">
        <span id="Orthodox_Radunitsa_ul"></span><br>
        по юлианскому календарю (старый стиль)
        </span>
    </div>
    <div>
        Вербное воскресенье<br>
        <span class="ulian">
        <span id="palm_Sunday_Orthodox_ul"></span><br>
        по юлианскому календарю (старый стиль)
        </span>
    </div>
    <div>
        Масленица<br>
        <span class="ulian">
        <span id="Maslenitsa_Orthodox_ul"></span><br>
        по юлианскому календарю (старый стиль)
        </span>
    </div>
</div>

<div class="box-range" range="[1583,4099]">
    <div>
        Католическая пасха<br>
        <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>
        Православная пасха<br>
        <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>
        Радуница<br>
        <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>
        Вербное воскресенье<br>
        <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>
        Масленица<br>
        <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>

<div class="box-range" range="[4100,0]">
    <div>Введите год с 326 по 4099</div>
</div>

<script>
var Y = document.getElementById("YearEntry");
    
Y.value = new Date().getFullYear();
    
Y.addEventListener("keyup", function() {
    this.value = this.value.replace(/\D/, '');
    showBox();
});
    
Y.addEventListener("change", showBox);
    
document.getElementById("button1").onclick = button1_click;
showBox();
button1_click();

function catholicDate(year) {
    // https://ru.wikipedia.org/wiki/Алгоритм_Гаусса_вычисления_даты_Пасхи
    // Пример на 1777 год (год рождения Карла Гаусса): год = 1777 
    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 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 showBox() {
    var y = +Y.value || 0, 
        box = document.getElementsByClassName("box-range"), 
        i, range, a;
    for(i=0; i<box.length; ++i) {
        range = JSON.parse(box[i].getAttribute('range')); 
        a = [];
        if(range[0]) a.push(y >= range[0]);
        if(range[1]) a.push(y <= range[1]);
        box[i].hidden = !eval(a.join('&&'))
    }
}

function button1_click() {
    var year = Y.value, 
        razn = 0; //какое-то значение по умолчанию если меньше 300 и больше 4099

    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;

    document.getElementById("Catholic_Easter_gr").innerHTML = formatDate(catholicDate(year));
    
    var date0_1 = catholicDate(year); 
    document.getElementById("Catholic_Easter_gr").innerHTML = formatDate(date0_1);
    
    var date0 = new Date(date0_1.getFullYear(), date0_1.getMonth(), date0_1.getDate() - razn); 
    document.getElementById("Catholic_Easter_ul").innerHTML = formatDate(date0);
    
    var date1 = orthodoxDate(year); 
    document.getElementById("Orthodox_Easter_ul").innerHTML = formatDate(date1);
    
    var date1_1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate() + razn); 
    document.getElementById("Orthodox_Easter_gr").innerHTML = formatDate(date1_1);

    var date2 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate() + 9); 
    document.getElementById("Orthodox_Radunitsa_ul").innerHTML = formatDate(date2);

    var date2_1 = new Date(date1_1.getFullYear(), date1_1.getMonth(), date1_1.getDate() + 9); 
    document.getElementById("Orthodox_Radunitsa_gr").innerHTML = formatDate(date2_1);

    var date3 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate() - 7); 
    document.getElementById("palm_Sunday_Orthodox_ul").innerHTML = formatDate(date3);

    var date3_1 = new Date(date1_1.getFullYear(), date1_1.getMonth(), date1_1.getDate() - 7); 
    document.getElementById("palm_Sunday_Orthodox_gr").innerHTML = formatDate(date3_1);

    var date4 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate() - 49); 
    document.getElementById("Maslenitsa_Orthodox_ul").innerHTML = formatDate(date4);

    var date4_1 = new Date(date1_1.getFullYear(), date1_1.getMonth(), date1_1.getDate() - 49); 
    document.getElementById("Maslenitsa_Orthodox_gr").innerHTML = formatDate(date4_1);
}
</script>
</body>
</html>

Блондинка · #64 (**permalink**) 07.12.2019, 08:17

laimas,
сейчас работает частично, вот если бы эти куски кода расположить ниже тега скрипт, и вставлять скрипом на страницу, чтобы иды не повторялись...

laimas · #65 (**permalink**) 07.12.2019, 08:22

Что значит частично, зачем вниз и какие иды?

Блондинка · #66 (**permalink**) 07.12.2019, 09:21

laimas,
Если ид есть в периоде 326-1582, то в периоде 1583-4099 дата не отображается...

Блондинка · #67 (**permalink**) 07.12.2019, 09:23

если бы можно эти строки

var date0_1 = catholicDate(year); 
    document.getElementById("Catholic_Easter_gr").innerHTML = formatDate(date0_1);

    var date1_1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate() + razn); 
    document.getElementById("Orthodox_Easter_gr").innerHTML = formatDate(date1_1);

    var date2_1 = new Date(date1_1.getFullYear(), date1_1.getMonth(), date1_1.getDate() + 9); 
    document.getElementById("Orthodox_Radunitsa_gr").innerHTML = formatDate(date2_1);

    var date3_1 = new Date(date1_1.getFullYear(), date1_1.getMonth(), date1_1.getDate() - 7); 
    document.getElementById("palm_Sunday_Orthodox_gr").innerHTML = formatDate(date3_1);

    var date4_1 = new Date(date1_1.getFullYear(), date1_1.getMonth(), date1_1.getDate() - 49); 
    document.getElementById("Maslenitsa_Orthodox_gr").innerHTML = formatDate(date4_1);

заменить на что-то подобное, добавив второй ид

var date0_1 = catholicDate(year); 
    document.getElementById("Catholic_Easter_gr", "Catholic_Easter_ul_day").innerHTML = formatDate(date0_1);

     var date1_1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate() + razn); 
    document.getElementById("Orthodox_Easter_gr", "Orthodox_Easter_ul_day").innerHTML = formatDate(date1_1);

    var date2_1 = new Date(date1_1.getFullYear(), date1_1.getMonth(), date1_1.getDate() + 9); 
    document.getElementById("Orthodox_Radunitsa_gr", "Orthodox_Radunitsa_ul_day").innerHTML = formatDate(date2_1);

    var date3_1 = new Date(date1_1.getFullYear(), date1_1.getMonth(), date1_1.getDate() - 7); 
    document.getElementById("palm_Sunday_Orthodox_gr", "palm_Sunday_Orthodox_ul_day").innerHTML = formatDate(date3_1);

    var date4_1 = new Date(date1_1.getFullYear(), date1_1.getMonth(), date1_1.getDate() - 49); 
    document.getElementById("Maslenitsa_Orthodox_gr", "Maslenitsa_Orthodox_ul_day").innerHTML = formatDate(date4_1);

а потом используя масивы

["Catholic_Easter_gr", "Orthodox_Easter_gr", "Orthodox_Radunitsa_gr", "palm_Sunday_Orthodox_gr", "Maslenitsa_Orthodox_gr"] вывести день недели, число, месяц, год

["Catholic_Easter_ul_day", "Orthodox_Easter_ul_day", "Orthodox_Radunitsa_ul_day", "palm_Sunday_Orthodox_ul_day", "Maslenitsa_Orthodox_ul_day"] вывести только день

["Catholic_Easter_ul", "Orthodox_Easter_ul", "Orthodox_Radunitsa_ul", "palm_Sunday_Orthodox_ul", "Maslenitsa_Orthodox_ul"] вывести только число, месяц, год через функцию, то мне осталось только вставить нужные иды которых не хватает и скрипт завершён...

laimas · #68 (**permalink**) 07.12.2019, 09:42

Сообщение от Блондинка

Если ид есть в периоде 326-1582, то в периоде 1583-4099

Такого быть не должно, значение атрибута id у каждого элемента на странице должно быть уникальным! Изменение положения на странице проблемы не решит.

Блондинка · #69 (**permalink**) 07.12.2019, 10:05

Сообщение от laimas

Такого быть не должно, значение атрибута id у каждого элемента на странице должно быть уникальным! Изменение положения на странице проблемы не решит.

Так если убрать со страницы эти куски кода, и вставлять их скрипом, то и получится что на странице только код периода 326-1582 где ид уникальны, а если эту часть кода убрать со страницы и скриптом вставить другой кусок кода периода 1583-4099 то и получится что ид ы не повторяются...

laimas · #70 (**permalink**) 07.12.2019, 10:12

Очень понятно. )

document.getElementById("Catholic_Easter_gr").innerHTML = formatDate(catholicDate(year));

а здесь, еще раз просто catholicDate(year)

var date0_1 = catholicDate(year);

и

document.getElementById("Catholic_Easter_gr").innerHTML = formatDate(date0_1);

Почему, что есть что здесь не понять.

Форум

Справочник

Discord чат

Курсы javascript