Страница 2 из 5 < 1 2 34 > Последняя »
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Получается огромный код (https://javascript.ru/forum/misc/84073-poluchaetsya-ogromnyjj-kod.html)

рони 29.05.2022 12:01
Цитата:
Сообщение от Сергей Ракипов
const formatter = new Intl.DateTimeFormat
превращает условно время 100000ms в 10:15 часы и минуты (года и тд как настроить)

Сергей Ракипов 29.05.2022 12:10
рони,
Спасибо. Вы помогли многим зависимым. Я это делаю для них бесплатно.

Сергей Ракипов 29.05.2022 12:11
Цитата:
Сообщение от рони
превращает условно время 100000ms в 10:15 часы и минуты (года и тд как настроить)
Понял

рони 29.05.2022 12:15
Сергей Ракипов,
обновить перед копированием или запуском на просмотр, исправлены мелкие ошибки.

Сергей Ракипов 29.05.2022 12:39
Цитата:
Сообщение от рони
обновить перед копированием или запуском на просмотр, исправлены мелкие ошибки.
Хорошо спасибо.

Сергей Ракипов 30.05.2022 14:20
Что то я в себя поверил и не рассчитал силы. Думал этот код заверстаю под нужный дизайн. Не получается. А можно все таки блоку придать день и время. Вот в этот дизайн и там проще сделать блок

Вот как я понимаю блоки с классом class="sobranie_sreda" class="sobranie_vtornik" и т.д. будут выводится в определенный день а блоки с классом <div class="nachalo_20_00"></div> или <div class="nachalo_21_00"></div> нужно выводить надпись сколько до собрание а если идет то надпись идет собрание. Но это мне так видится может это не оптимально. Просто есть дизайн блока и нужно что бы просто присваивать блоку нужны класс с днем и временем. 

<!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;
}

.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;
}
.ssilka_karta_proiti{
    color: var(--tset_dopolnitelnyi);
}
.ssilka_karta_proiti: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" class="sobranie_sreda">
		<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">
				Собрание Начнется через:<br> 
                <div class="nachalo_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>
<br><br>
<div class="sobranie_blok" class="sobranie_vtornik">
    <div class="granitsa_right">
        
    </div>
    <div class="sobranie_nazvanie">
        Единство
    </div>
    <div class="sobranie_den_nedeli_vremya">
        <div class="den_nedeli_vremya">
            Вторник /
            21:00
        </div>
    </div>
    <div class="sobranie_cherez_ckolko">
        <div class="cherez_ckolko">
            Собрание Начнется через:<br> 
            <div class="nachalo_21_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>
</body>
</html>

рони 30.05.2022 14:59
Сергей Ракипов,
а можно вместо class="sobranie_sreda"
и nachalo_20_00
будет data-weekday="3" и data-begin="20,00" ?

Сергей Ракипов 31.05.2022 04:50
рони,
Да конечно это же не принципиально лишь бы работало.

рони 31.05.2022 07:34
расписание собраний инициализация из dataset
 
Сергей Ракипов,
<!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">
                    Собрание Начнется через:<br>
                    <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">
                    Вторник / 11:00
                </div>
            </div>
            <div class="sobranie_cherez_ckolko">
                <div class="cherez_ckolko">
                    Собрание Начнется через:<br>
                    <div data-begin="11_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 txt = divLong.parentNode.firstChild;
            return {
                div,
                weekday,
                divLong,
                hour,
                minute,
                oldHtml,
                txt
            }
        })
        const timer = () => {
            requestAnimationFrame(timer);
            const localTime = new Date;
            const day = localTime.getDay();
            data.forEach(obj => {
                let {
                    div,
                    weekday,
                    divLong,
                    hour,
                    minute,
                    oldHtml,
                    txt
                } = obj;
                const beginTime = new Date;
                beginTime.setHours(+hour, +minute, 0, 0);
                const endTime = new Date;
                hour += 1;
                minute += 15;
                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, `Собрание Начнется через:`) : `Собрание идет:`;
                    long = new Date(Math.abs(long) + localTime.getTimezoneOffset() * 60000);
                    long = formatter.format(long);
                    if (oldHtml == long) return;
                    div.style.display = "grid";
                    txt.data = status;
                    divLong.innerHTML = obj.oldHtml = long;
                } else if (div.style.display != "none") div.style.display = "none";
            })
        }
        requestAnimationFrame(timer);

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

Сергей Ракипов 31.05.2022 12:12
рони,
Вы дописали еще возможность получить информацию о том сколько времени идет собрание. Но дело в том что собрание бывают 1 час, 1 час 15 минут, 1 час 30 минут и возможно даже 2 часа.
И это в принципе не нужно. Нужно просто надпись что собрание идет а сколько идет или сколько осталось это не так важно. А когда оно закончится просто убрать блок. То есть была где то возможность что бы было возможность до сколько это будет собрание или просто продолжительность


Часовой пояс GMT +3, время: 14:39.
Страница 2 из 5 < 1 2 34 > Последняя »
Показывать 40 сообщений этой темы на одной странице