Форум

рони · #21 (**permalink**) 31.05.2022, 13:52

Сообщение от Сергей Ракипов

То есть была где то возможность что бы было возможность до сколько это будет собрание или просто продолжительность

куда вы дели продолжительность? ваши карты, вам и сдавать.

рони · #22 (**permalink**) 31.05.2022, 13:54

Сообщение от Сергей Ракипов

Вы дописали еще возможность получить информацию о том сколько времени идет собрание. Но дело в том что собрание бывают 1 час, 1 час 15 минут, 1 час 30 минут и возможно даже 2 часа.

я урезал полноценный вариант, сейчас вы добавите продолжительность, потом вспомните о дне и часах, и вуаля мы вернёмся к прежнему варианту)))

Сергей Ракипов · #23 (**permalink**) 31.05.2022, 14:50

то есть я имею виду что продолжительность нужно устанавливать в скрипте, информацию выводить нужно только виде надпись что собрание идет. К примеру одна группа проводит по среда собрание продолжительность 1:15 а другая в 1 час ровно

И я хочу в скрипте отметить что одной группе 1:15 была надпись собрание идет а к другой группе я могу отметить что она идет 1 час и там тоже когда начнется собрание просто надпись что идет собрание.

Мне не удобно казаться человеку которому помогают а он не может нормально с первого раза все объяснить и дергает по пустякам.

рони · #24 (**permalink**) 31.05.2022, 15:04

Сообщение от Сергей Ракипов

И я хочу в скрипте отметить что одной группе 1:15 была надпись собрание идет а к другой группе я могу отметить что она идет 1 час и там тоже когда начнется собрание просто надпись что идет собрание.

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

рони · #25 (**permalink**) 31.05.2022, 15:06

Сергей Ракипов,
и для статуса элемент добавьте.

рони · #26 (**permalink**) 31.05.2022, 15:16

Сергей Ракипов,
будет так

<div class="cherez_ckolko">
                    <div data-duration="1_15"></div>
                    <div data-status="Собрание Начнется через:_Собрание идет:"></div>
                    <div data-begin="15_00"></div>
                </div>

устраивает?

Сергей Ракипов · #27 (**permalink**) 31.05.2022, 15:18

рони,

hour += 1;
                minute += 0; // продолжительность собрание

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

Сергей Ракипов · #28 (**permalink**) 31.05.2022, 15:20

рони,
<div data-duration="1_15"></div>
Да вот так подойдет и в статус выводить только что собрание идет не нужно туда время

рони · #29 (**permalink**) 31.05.2022, 15:38

Сергей Ракипов,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>index</title>
    <link rel="shortcut icon" href="izobrazhenie/favicon.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="index">
    <meta name="Keywords" content="index">
    <style>
        .sobranie_blok {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-template-rows: auto auto auto auto auto auto;
            grid-template-areas: "sobranie_nazvanie sobranie_cherez_ckolko granitsa_right" "sobranie_den_nedeli_vremya sobranie_cherez_ckolko granitsa_right" "sobranie_adres sobranie_adres granitsa_right" "sobranie_opisanie sobranie_opisanie granitsa_right" "sobranie_karta sobranie_karta granitsa_right" "sobranie_kak_proiti sobranie_kak_proiti granitsa_right";
            row-gap: 0px;
            column-gap: 0px;
            justify-content: center;
            --tset_osnovnoi: #0000FF;
            --tset_dopolnitelnyi: #000000;
        }
        .granitsa_right {
            grid-area: granitsa_right;
            width: 1px;
            margin: -20px 0px -20px 0px;
        }
        .sobranie_nazvanie {
            width: 360px;
            grid-area: sobranie_nazvanie;
            font-size: 2.0rem;
            font-weight: 700;
            color: var(--tset_osnovnoi);
            padding: 0px 0px 5px 0px;
        }
        .sobranie_den_nedeli_vremya {
            grid-area: sobranie_den_nedeli_vremya;
            padding: 0px 0px 0px 0px;
        }
        .den_nedeli_vremya {
            font-size: .8rem;
        }
        .sobranie_cherez_ckolko {
            grid-area: sobranie_cherez_ckolko;
            padding: 0px 20px 0px 20px;
            align-self: center;
            border-left: 1px solid var(--tset_osnovnoi);
        }
        .cherez_ckolko {
            text-align: center;
            font-size: .8rem;
        }
        .cherez_ckolko_vremya {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #dot {
            margin: -3px 2px 0px 2px;
        }
        .sobranie_opisanie {
            grid-area: sobranie_opisanie;
            padding: 5px 0px 20px 0px;
        }
        .sobranie_adres {
            grid-area: sobranie_adres;
            padding: 20px 0px 0px 0px;
        }
        .sobranie_karta {
            grid-area: sobranie_karta;
            padding: 0px 0px 10px 0px;
            width: 100%;
        }
        .ikonka_tekst {
            display: flex;
            align-items: center;
        }
        .ikonka {
            width: 48px;
        }
        .tekst {
            padding: 0px 0px 0px 15px;
        }
        .sobranie_kak_proiti a:hover {
            color: var(--tset_dopolnitelnyi);
        }
        .sobranie_karta a:hover {
            color: var(--tset_dopolnitelnyi);
            text-decoration: none;
        }
        .karta {
            display: block;
        }
        .sobranie_kak_proiti {
            grid-area: sobranie_kak_proiti;
            padding: 0px 0px 0px 0px;
            width: 100%;
        }
        .blok_kak_proiti_kartinka {
            display: block;
            max-width: 520px;
        }
        .kak_proiti_kartinka {
            width: 100%;
        }
    </style>
</head>
<body>
    <main>
        <div class="sobranie_blok" data-weekday="2">
            <div class="granitsa_right">
            </div>
            <div class="sobranie_nazvanie">
                Калитка
            </div>
            <div class="sobranie_den_nedeli_vremya">
                <div class="den_nedeli_vremya">
                    Вторник / 15:00
                </div>
            </div>
            <div class="sobranie_cherez_ckolko">
                <div class="cherez_ckolko">
                    <div data-duration="1_15"></div>
                    <div data-status="Собрание Начнется через:_Собрание идет:"></div>
                    <div data-begin="15_00"></div>
                </div>
            </div>
            <div class="sobranie_opisanie">
                Описание собрание: <br>
                <span class="malenkii_chrift">Ежедневник</span>
            </div>
            <div class="sobranie_adres">
                ул. Декабристов 27<br>
                <span class="malenkii_chrift">Во дворе, домофон 2222, цокольный этаж</span>
            </div>
            <div class="sobranie_karta">
                <a href="#">Карта</a>
            </div>
            <div class="sobranie_kak_proiti">
                <a href="#">Как пройти</a>
            </div>
        </div>
        <br><br>
        <div class="sobranie_blok" data-weekday="2">
            <div class="granitsa_right">
            </div>
            <div class="sobranie_nazvanie">
                Единство
            </div>
            <div class="sobranie_den_nedeli_vremya">
                <div class="den_nedeli_vremya">
                    Вторник / 20:00
                </div>
            </div>
            <div class="sobranie_cherez_ckolko">
                <div class="cherez_ckolko">
                    <div data-duration="3_15"></div>
                    <div data-status="Собрание Начнется через:_Собрание идет:"></div>
                    <div data-begin="20_00"></div>
                </div>
            </div>
            <div class="sobranie_opisanie">
                Описание собрание: <br>
                <span class="malenkii_chrift">Ежедневник</span>
            </div>
            <div class="sobranie_adres">
                ул. Декабристов 27<br>
                <span class="malenkii_chrift">Во дворе, домофон 2222, цокольный этаж</span>
            </div>
            <div class="sobranie_karta">
                <a href="#">Карта</a>
            </div>
            <div class="sobranie_kak_proiti">
                <a href="#">Как пройти</a>
            </div>
        </div>
    </main>
    <script>
        document.addEventListener( "DOMContentLoaded" , function() {

        const formatter = new Intl.DateTimeFormat("ru", {
            hour: "2-digit",
            minute: "2-digit"
        });
        let data = Array.from(document.querySelectorAll("[data-weekday]"), div => {
            let weekday = +div.dataset.weekday;
            let divLong = div.querySelector("[data-begin]");
            let [hour, minute] = divLong.dataset.begin.split("_");
            hour = +hour;
            minute = +minute;
            let oldHtml = "";
            let divDuration = div.querySelector("[data-duration]");
            let [h, m] = divDuration.dataset.duration.split("_");
            h = +h, m = +m;
            let txt = div.querySelector("[data-status]");
            let [before,after] = txt.dataset.status.split("_");
            return {
                div,
                weekday,
                divLong,
                hour,
                minute,
                oldHtml,
                divDuration,
                h,
                m,
                txt,
                before,
                after
            }
        })
        const timer = () => {
            requestAnimationFrame(timer);
            const localTime = new Date;
            const day = localTime.getDay();
            data.forEach(obj => {
                let {
                div,
                weekday,
                divLong,
                hour,
                minute,
                oldHtml,
                divDuration,
                h,
                m,
                txt,
                before,
                after
            } = obj;
                const beginTime = new Date;
                beginTime.setHours(+hour, +minute, 0, 0);
                const endTime = new Date;
                hour += h;
                minute += m;
                endTime.setHours(hour, minute, 0, 0);
                let time = endTime - localTime;
                if (weekday == day && time > 0) {
                    let long = beginTime - localTime;
                    let status = long > 0 ? (long += 60000, before) : after;
                    long = new Date(Math.abs(long) + localTime.getTimezoneOffset() * 60000);
                    long = formatter.format(long);
                    if (oldHtml == long) return;
                    div.style.display = "grid";
                    divDuration.innerHTML = `Продолжительность ${new String(h).padStart(2, '0')}:${new String(m).padStart(2, '0')}`
                    txt.innerHTML = status;
                    divLong.innerHTML = obj.oldHtml = long;

                } else if (div.style.display != "none") div.style.display = "none";
            })
        }
        requestAnimationFrame(timer);

        });
    </script>
</body>
</html>

рони · #30 (**permalink**) 31.05.2022, 15:41

Сергей Ракипов,
в каждом блоке вам нужно правильно указать четыре атрибута data-... , согласно этим данным блок будет виден или нет, а также будет выводится время до и сколько уже идёт.

Форум

Справочник

Discord чат

Курсы javascript