Вход

Просмотр полной версии : Получается огромный код

Сергей Ракипов
28.05.2022, 04:50
У меня вот какая задача.
Нужно что бы в блок появлялся в определенный день недели и в этот день был до определенного дня, при этом показывал время сколько осталось этому блоку "жить" а потом исчезал. К примеру в субботу до 20:00. Он появляется в субботу показывал сколько часов и минут осталось до 20:00 и после 20:00 исчезает до следующей субботы
И я это сделал.

Но!!! У меня таких блоков будет более 150 и у каждого будет свое время и день недели. И если делать так для каждого код будет невероятной длины.

Продолжение в следующем посте.


<!DOCTYPE html>
<html lang="en">
<head>
<style>
html{
font-family: 'Courier New', Courier, monospace;
}
.blok {
border: 1px #000 solid;
padding:20px;
margin: 20px;
}
.nazvanie {
color:tomato;
}
.line{
display: inline-block;
}
</style>
</head>
<body>

<p id="hours" class="line"></p>
<p id="dot" class="line">:</p>
<p id="minutes" class="line"></p>
<br>
<p id="current_weekday" class="line"></p>
<br><br>

<div class="blok" id="blok_1">
<div class="nazvanie">Собрание в Суббота</div>
<div class="nachalo">Начало в 20:00</div>
<div class="vremya">
<p class="statys"></p>
<p class="remains"></p>
</div>
</div>

<script>
// JavaScript Document

let localTime = new Date;
let hours = localTime.getHours();
let minutes = localTime.getMinutes();

let hoursInput = document.getElementById("hours");
let minutesInput = document.getElementById("minutes");

let statys = document.getElementsByClassName("statys")[0];
let remains = document.getElementsByClassName("remains")[0];
let current_weekday = document.getElementById("current_weekday");

let blok_1 = document.getElementById("blok_1");

let hoursOpen = 20;
let hoursClose = 21;
let oneMinuts = 60;
let rezult_1 = "";
let rezult_2 = "";

let day = localTime.getDay() + 1;

if( day == 1 ) DayofWeek = 'воскресенье';
if( day == 2 ) DayofWeek = 'понедельник';
if( day == 3 ) DayofWeek = 'вторник';
if( day == 4 ) DayofWeek = 'среда';
if( day == 5 ) DayofWeek = 'четверг';
if( day == 6 ) DayofWeek = 'пятница';
if( day == 7 ) DayofWeek = 'суббота';

function weekday(){
if(day == 1){
blok_1.style.display = "none";
}
if(day == 1){
blok_1.style.display = "none";
}
if(day == 3){
blok_1.style.display = "none";
}
if(day == 4){
blok_1.style.display = "none";
}
if(day == 5){
blok_1.style.display = "none";
}
if(day == 6){
blok_1.style.display = "none";
}
if(day == 7){
blok_1.style.display = "block";

function openCloseStatys(){
if(hours>=0&&hours<=20){
blok_1.style.display="block";
statys.innerHTML=`Начнется через`;
}
else if(hours>= 21)
{
blok_1.style.display = "none";
}
else if(hours >= 20){
statys.innerHTML = `Собрание идет`;
blok_1.style.display = "block";
}
}
openCloseStatys();
}
}
weekday();

function timeHours(){
if(hours>=0){
rezult_1 = hoursOpen - hours -1;
}
}
timeHours();

function timeMinuts(){
rezult_2 = oneMinuts - minutes;
if(rezult_2>=0&&rezult_2<=9){
rezult_2 = "0" + rezult_2;
}
}
timeMinuts();

function timeZero(){
if(minutes<=9){
minutes = "0" + minutes;
}
if(hours<=9){
hours = "0" + hours;
}
}
timeZero();

current_weekday.innerHTML = `${DayofWeek}`;
hoursInput.innerHTML = `${hours}`;
minutesInput.innerHTML = `${minutes}`;
remains.innerHTML = `${rezult_1} ${rezult_2}`;

</script>
</body>
</html>
Сергей Ракипов
28.05.2022, 04:54
И я не знаю как более коротко и оптимально написать. Вот к примеру 7 блоков, у каждого свой день недели и они должны появится в свой день в 00:00 исчезнуть в 20:00 при этом показывая сколько им "жить"


<!DOCTYPE html>
<html lang="en">
<head>
<style>
html{
font-family: 'Courier New', Courier, monospace;
}
.blok {
border: 1px #000 solid;
padding:20px;
margin: 20px;
}
.nazvanie {
color:tomato;
}
.line{
display: inline-block;
}
</style>
</head>
<body>

<p id="hours" class="line"></p>
<p id="dot" class="line">:</p>
<p id="minutes" class="line"></p>
<br>
<p id="current_weekday" class="line"></p>
<br><br>

<div class="blok" id="blok_1">
<div class="nazvanie">Собрание в понедельник</div>
<div class="nachalo">Начало в 20:00</div>
<div class="vremya">
<p class="statys"></p>
<p class="remains"></p>
</div>
</div>

<div class="blok" id="blok_2">
<div class="nazvanie">Собрание в вторник</div>
<div class="nachalo">Начало в 20:00</div>
<div class="vremya">
<p class="statys"></p>
<p class="remains"></p>
</div>
</div>

<div class="blok" id="blok_3">
<div class="nazvanie">Собрание в Среда</div>
<div class="nachalo">Начало в 20:00</div>
<div class="vremya">
<p class="statys"></p>
<p class="remains"></p>
</div>
</div>

<div class="blok" id="blok_4">
<div class="nazvanie">Собрание в Четверг</div>
<div class="nachalo">Начало в 20:00</div>
<div class="vremya">
<p class="statys"></p>
<p class="remains"></p>
</div>
</div>

<div class="blok" id="blok_5">
<div class="nazvanie">Собрание в Пятница</div>
<div class="nachalo">Начало в 20:00</div>
<div class="vremya">
<p class="statys"></p>
<p class="remains"></p>
</div>
</div>

<div class="blok" id="blok_6">
<div class="nazvanie">Собрание в Суббота</div>
<div class="nachalo">Начало в 20:00</div>
<div class="vremya">
<p class="statys"></p>
<p class="remains"></p>
</div>
</div>

<div class="blok" id="blok_7">
<div class="nazvanie">Собрание в Воскресение</div>
<div class="nachalo">Начало в 20:00</div>
<div class="vremya">
<p class="statys"></p>
<p class="remains"></p>
</div>
</div>


<script>
// JavaScript Document

let localTime = new Date;
let hours = localTime.getHours();
let minutes = localTime.getMinutes();

let hoursInput = document.getElementById("hours");
let minutesInput = document.getElementById("minutes");

let statys = document.getElementsByClassName("statys")[0];
let remains = document.getElementsByClassName("remains")[0];
let current_weekday = document.getElementById("current_weekday");

let blok_1 = document.getElementById("blok_1");
let blok_2 = document.getElementById("blok_2");
let blok_3 = document.getElementById("blok_3");
let blok_4 = document.getElementById("blok_4");
let blok_5 = document.getElementById("blok_5");
let blok_6 = document.getElementById("blok_6");
let blok_7 = document.getElementById("blok_7");

let hoursOpen = 20;
let hoursClose = 21;
let oneMinuts = 60;
let rezult_1 = "";
let rezult_2 = "";

let day = localTime.getDay() + 1;

if( day == 1 ) DayofWeek = 'воскресенье';
if( day == 2 ) DayofWeek = 'понедельник';
if( day == 3 ) DayofWeek = 'вторник';
if( day == 4 ) DayofWeek = 'среда';
if( day == 5 ) DayofWeek = 'четверг';
if( day == 6 ) DayofWeek = 'пятница';
if( day == 7 ) DayofWeek = 'суббота';

function weekday(){
if(day == 1){
blok_1.style.display = "none";
}
if(day == 1){
blok_1.style.display = "none";
}
if(day == 3){
blok_1.style.display = "none";
}
if(day == 4){
blok_1.style.display = "none";
}
if(day == 5){
blok_1.style.display = "none";
}
if(day == 6){
blok_1.style.display = "none";
}
if(day == 7){
blok_1.style.display = "block";

function openCloseStatys(){
if(hours>=0&&hours<=20){
blok_1.style.display="block";
statys.innerHTML=`Начнется через`;
}
else if(hours>= 21)
{
blok_1.style.display = "none";
}
else if(hours >= 20){
statys.innerHTML = `Собрание идет`;
blok_1.style.display = "block";
}
}
openCloseStatys();
}
}
weekday();

function timeHours(){
if(hours>=0){
rezult_1 = hoursOpen - hours -1;
}
}
timeHours();

function timeMinuts(){
rezult_2 = oneMinuts - minutes;
if(rezult_2>=0&&rezult_2<=9){
rezult_2 = "0" + rezult_2;
}
}
timeMinuts();

function timeZero(){
if(minutes<=9){
minutes = "0" + minutes;
}
if(hours<=9){
hours = "0" + hours;
}
}
timeZero();

current_weekday.innerHTML = `${DayofWeek}`;
hoursInput.innerHTML = `${hours}`;
minutesInput.innerHTML = `${minutes}`;
remains.innerHTML = `${rezult_1} ${rezult_2}`;

</script>
</body>
</html>


И еще как то можно сделать что бы время всегда было "он лайн" а не только когда страница обновится.
рони
28.05.2022, 10:12
И еще как то можно сделать что бы время всегда было "он лайн"

<!DOCTYPE html>
<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
fieldset {
border: 1px solid #4B0082;
display: inline-block;
border-radius: 8px;
padding: 2px 4px;
background-color: #EEE8AA;
}

legend {
color: #9400D3;
font-weight: bold;
border: 1px solid #4B0082;
border-radius: 4px;
background-color: #FFFFFF;
}

fieldset h3 {
margin: 2px auto;
font-weight: normal;
text-align: center;
}

.block {
background-color: #7AFFFF;
padding: 2px 4px;
border-radius: 8px;
margin: 4px auto;
color: #9400D3;
border: 1px solid #4B0082;
}
</style>
</head>

<body>
<div class="reglament"></div>
<script>
const data = [{
title: 'Собрание в Суббота',
begin: {
hh: 20,
mm: 0
},
weekday: 6
}, {
title: 'Собрание в Пятница',
begin: {
hh: 20,
mm: 0
},
weekday: 5
}, {
title: 'Собрание в Суббота',
begin: {
hh: 10,
mm: 0
},
weekday: 6
}];
let oldHtml;
const formatter = new Intl.DateTimeFormat("ru", {
hour: "2-digit",
minute: "2-digit"
});
const nameWeekday = new Intl.DateTimeFormat("ru", {
weekday: "long"
});

function render(obj) {
let {
title,
begin,
status,
long
} = obj;
return `<div class="block">
<div class="title">${title}</div>
<div class="begin">${begin}</div>
<div class="time">
<span class="status">${status}</span>
<span class="long">${long}</span>
</div>
</div>`
}

function renderHtml(time, weekday, arr) {
return `<fieldset>
<legend>
${time}
</legend>
<h3>${weekday}</h3>
${arr.join('')}
</fieldset>`
}

function filter(arr, day) {
return arr.filter(({
weekday
}) => weekday == day);
}

function create(data) {
const timer = () => {
requestAnimationFrame(timer);
let localTime = new Date;
const hourEnd = 21;
//const day = localTime.getDay();
const day = 6//для примера, проверить какие сообщения будут в субботу
let arr = localTime.getHours() < hourEnd ? filter(data, day) : [];
arr = arr.map(obj => {
let {
title,
begin
} = obj;
let {
hh,
mm
} = begin;
let time = new Date;
time.setHours(hh, mm, 0, 0);
begin = `Начало в ${formatter.format(time)}`;
let long = localTime - time;
let status = long < 0 ? (long -= 60000, `Начнется через`) : `Собрание идет`;
long = new Date(Math.abs(long) + localTime.getTimezoneOffset() * 60000);
long = formatter.format(long);
obj = {
title,
begin,
status,
long
};
return render(obj);
});
let weekday = nameWeekday.format(localTime);
weekday = weekday.slice(0, 1).toUpperCase() + weekday.slice(1);
localTime = formatter.format(localTime);
let html = renderHtml(localTime, weekday, arr);
if (oldHtml == html) return;
document.querySelector(".reglament").innerHTML = oldHtml = html;
};
requestAnimationFrame(timer)
}
create(data)
</script>
</body>

</html>
Сергей Ракипов
29.05.2022, 01:07
рони,
Если честно то я вообще не понял что там. Можно хотя бы в двух словах по какому принципу там все работает а я уж как нибудь разберусь
рони
29.05.2022, 08:08
Сергей Ракипов,
:-?
есть массив когда выводить сообщение begin, что выводить title, в какой день недели weekday .
массив фильтруется filter выбираются все элементы на текущий день weekday == day (например суббота - weekday: 6) сравнивается время между текущим и временем начала long - формируются остальные сообщения -- массив сообщений преобразуется в блок render -- блоки объединяются renderHtml -- и выводятся раз в минуту на страницу.
если время больше 21 часа, ничего не выводится, только текущие день и время.

выше для теста сделал вывод сообщений в субботу(строка 114, потом убрать, вернуть 113)
код меняется, перед копированием обновить страницу.
Сергей Ракипов
29.05.2022, 09:54
Что то слишком сложно или я не правильно донес свою мысль.
Вот смотри есть организация которая оказывает психологическую помощь виде проведение собраний. Они проводят это каждый день в разное время.
И я им создаю страницу. На которой человек можете получить информацию какие сегодня (именно сегодня, если это суббота то ему покажут только субботу если это воскресение то ему покажут только воскресение) и время через сколько начнется собрание. Если собрание идет то появится надпись что идет собрание. Как только собрание закончится (оно идет час) то на странице пропадет информация о собрании. И как я вижу что я написал блок в него внес нужную информацию(какой собрание. для кого оно и т.д.) и в скрипте отметил что оно проходит во вторник с 20:00 до 21:00 и таких блоков у меня может быть 150 штук. А вашем скрипте я вижу пятница суббота не понятно как мне блок отметить что он проходит тогда то и во столько то.
Вот мне нужно создать 150 блоков и в скрипте как то отметить для каждого свой день и время. И что бы скрипт когда приходил день и время отрабатывал как нужно.
Вот пример там без времени но они выводятся по принципу какой день и в порядке приближение времени.
https://na-msk.ru/
Блок собрание которые скоро начнутся.

Мне будет досточно что блоку в определенный день будет поставлен display:block а как его время закончится display:none
рони
29.05.2022, 10:33
Сергей Ракипов,
скрипт делает всё что вы описали, вам нужно только указать данные и всё. от вас же требуется создать только {
title: 'Собрание в Суббота',
begin: {
hh: 20,
mm: 0
},
weekday: 6
} , столько раз сколько вам нужно.
зачем вам все блоки на странице, если нужны только в данный день и час
рони
29.05.2022, 10:36
Сергей Ракипов,
добавить только продолжительность собрания в данные.
Сергей Ракипов
29.05.2022, 10:50
рони,
ААА !!! вон как это работает!!! ОГО это даже превзошло все мои ожидание!
А если собрание идет 1:15 то нужно соответственно поставить 75 000
mm: 0 это минуты если в 19:30 начинается нужно mm: 30 поставить?

а что это
const formatter = new Intl.DateTimeFormat("ru", {
hour: "2-digit",
minute: "2-digit"
??
рони
29.05.2022, 11:57
Сергей Ракипов,
добавлена продолжительность собрания

<!DOCTYPE html>
<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
fieldset {
border: 1px solid #4B0082;
display: inline-block;
border-radius: 8px;
padding: 2px 4px;
background-color: #EEE8AA;
text-align: center;
}

legend {
color: #9400D3;
font-weight: bold;
border: 1px solid #4B0082;
border-radius: 4px;
background-color: #FFFFFF;
}

fieldset h3 {
margin: 2px auto;
font-weight: normal;
text-align: center;
}

.block {
background-color: #7AFFFF;
padding: 2px 4px;
border-radius: 8px;
margin: 4px auto;
color: #9400D3;
border: 1px solid #4B0082;
}

.duration {}

fieldset h4 {
margin: 0;
}
</style>
</head>

<body>
<div class="reglament"></div>
<script>
const data = [{
title: `Группа «Окунь»

г. Москва, м. Улица 1905 года, Улица 1905 года, 5`,
begin: {
hour: 20,
minute: 0
},
duration: {
hour: 1,
minute: 15
},
weekday: 0
},
{
title: `Группа «Лайф»

г. Тула, проспект Ленина, 22`,
begin: {
hour: 11,
minute: 0
},
duration: {
hour: 1,
minute: 15
},
weekday: 0
},
{
title: `Группа «Люлька»

г. Москва, м. ВДНХ, Москва, Ярославская д.5`,
begin: {
hour: 17,
minute: 0
},
duration: {
hour: 1,
minute: 15
},
weekday: 0
}




];
let oldHtml;
const formatter = new Intl.DateTimeFormat("ru", {
hour: "2-digit",
minute: "2-digit"
});
const nameWeekday = new Intl.DateTimeFormat("ru", {
weekday: "long"
});

function render(obj) {
let {
title,
begin,
duration,
status,
long
} = obj;
return `<div class="block">
<div class="begin">${begin}</div>
<div class="title">${title}</div>

<div class="duration">
<h4>Продолжительность</h4>
${duration}</div>

<div class="time">
<span class="status">${status}</span>
<span class="long">${long}</span>
</div>
</div>`
}

function renderHtml(time, weekday, arr) {
return `<fieldset>
<legend>
${time}
</legend>
<h3>${weekday}</h3>
${arr.join('')}
</fieldset>`
}

function filter(arr) {
const localTime = new Date;
const day = localTime.getDay();


return arr.filter(obj => {
const beginTime = new Date;
let hour = obj.begin.hour;
let minute = obj.begin.minute;
beginTime.setHours(hour, minute, 0, 0);
obj.beginTime = beginTime;

const endTime = new Date;
hour += obj.duration.hour;
minute += obj.duration.minute;
endTime.setHours(hour, minute, 0, 0);
obj.endTime = endTime;

let time = endTime - localTime;

return obj.weekday == day && time > 0;
});
}

function arrSort(a, b) {
return a.begin.hour - b.begin.hour || a.begin.minute - b.begin.minute
}


function create(data) {
const timer = () => {
requestAnimationFrame(timer);
let localTime = new Date;
let arr = filter(data);
arr.sort(arrSort);
arr = arr.map(obj => {
let {
title,
beginTime,
endTime,
} = obj;
begin = `<h4>Начало в</h4> ${formatter.format(beginTime)}`;
let long = beginTime - localTime;
let status = long > 0 ? (long += 60000, `Начнется через`) : `Собрание идет`;
long = new Date(Math.abs(long) + localTime.getTimezoneOffset() * 60000);
long = formatter.format(long);
let duration = endTime - beginTime;
duration = new Date(duration + localTime.getTimezoneOffset() * 60000);
duration = formatter.format(duration);

obj = {
title,
begin,
duration,
status,
long
};
return render(obj);
});
let weekday = nameWeekday.format(localTime);
weekday = weekday.slice(0, 1).toUpperCase() + weekday.slice(1);
localTime = formatter.format(localTime);
let html = renderHtml(localTime, weekday, arr);
if (oldHtml == html) return;
document.querySelector(".reglament").innerHTML = oldHtml = html;
};
requestAnimationFrame(timer)
}
create(data)
</script>
</body>

</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
Сергей Ракипов,
<!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 часа.
И это в принципе не нужно. Нужно просто надпись что собрание идет а сколько идет или сколько осталось это не так важно. А когда оно закончится просто убрать блок. То есть была где то возможность что бы было возможность до сколько это будет собрание или просто продолжительность
рони
31.05.2022, 13:52
То есть была где то возможность что бы было возможность до сколько это будет собрание или просто продолжительность
куда вы дели продолжительность? ваши карты, вам и сдавать.
рони
31.05.2022, 13:54
Вы дописали еще возможность получить информацию о том сколько времени идет собрание. Но дело в том что собрание бывают 1 час, 1 час 15 минут, 1 час 30 минут и возможно даже 2 часа.
я урезал полноценный вариант, сейчас вы добавите продолжительность, потом вспомните о дне и часах, и вуаля мы вернёмся к прежнему варианту)))
Сергей Ракипов
31.05.2022, 14:50
то есть я имею виду что продолжительность нужно устанавливать в скрипте, информацию выводить нужно только виде надпись что собрание идет. К примеру одна группа проводит по среда собрание продолжительность 1:15 а другая в 1 час ровно

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

Мне не удобно казаться человеку которому помогают а он не может нормально с первого раза все объяснить и дергает по пустякам.
рони
31.05.2022, 15:04
И я хочу в скрипте отметить что одной группе 1:15 была надпись собрание идет а к другой группе я могу отметить что она идет 1 час и там тоже когда начнется собрание просто надпись что идет собрание.
вы отказались от такого варианта, так что добавляйте элемент с продолжительностью в ваши блоки.
рони
31.05.2022, 15:06
Сергей Ракипов,
и для статуса элемент добавьте.
рони
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>
устраивает?
Сергей Ракипов
31.05.2022, 15:18
рони,

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


Вот тут я понял могу поставить продолжительность собрание, но я это сделаю для всех собраний, а как сделать что для одного час для другого два часа.
Сергей Ракипов
31.05.2022, 15:20
рони,
<div data-duration="1_15"></div>
Да вот так подойдет и в статус выводить только что собрание идет не нужно туда время
рони
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>
рони
31.05.2022, 15:41
Сергей Ракипов,
в каждом блоке вам нужно правильно указать четыре атрибута data-... , согласно этим данным блок будет виден или нет, а также будет выводится время до и сколько уже идёт.
Сергей Ракипов
31.05.2022, 15:42
рони,
ИДЕАЛЬНО! :yes:
Сергей Ракипов
31.05.2022, 15:43
рони,
Да там все понятно, спасибо
Сергей Ракипов
31.05.2022, 15:44
рони,
Но только не 4 а три, день, время и продолжительность, я просто переспрошу на всякий случай.
рони
31.05.2022, 15:47
Сергей Ракипов,
четыре!!!
data-weekday="2"
data-duration="1_15"
data-status="Собрание Начнется через:_Собрание идет:"
data-begin="15_00"
Сергей Ракипов
31.05.2022, 15:49
рони,
А я даже в расчет не взял это с ними все хорошо их даже менять не нужно )))
рони
31.05.2022, 15:51
Сергей Ракипов,
удачи!)))
Сергей Ракипов
29.04.2023, 10:55
Помогите сократить код. Если это возможно.
Это просто код который меняет оформление.



<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-size: 18px;
}

body {
background-color: #fff;
color: #000;
font-size: 1rem;
}

.light {
background-color: #fff;
color: #000;
}

.black {
background-color: #000;
color: #fff;
}

.size__1 {
font-size: .8rem;
}

.size__2 {
font-size: 1rem;
}

.size__3 {
font-size: 1.2rem;
}

main {
max-width: 480px;
padding: 0px 20px 0px 20px;
margin: 0px auto 0px;
}

.title {
font-weight: 900;
font-size: 26px;
padding: 20px 0px 20px 0px;
}

.sample__text {
margin: 20px 0px 20px 0px;
}

.general__blok {
display: flex;
}

.button {
display: flex;
justify-content: center;
align-items: center;
border-width: 3px;
border-style: solid;
border-color: #F4A900;
border-radius: 50%;
width: 48px;
height: 48px;
margin: 0px 5px 0px 5px;
cursor: pointer;
}

.color__fonts {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0px 30px 0px 30px;
}

.color__fonts__title {
margin: 0px 0px 10px 0px;
font-weight: 900;
}

.color__fonts__block {
display: flex;
}

.color__fonts__button__1 {
background-color: #fff;
color: #000;
}

.color__fonts__button__2 {
background-color: #000;
color: #fff;
}

.size__fonts {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0px 30px 0px 30px;
}

.size__fonts__title {
margin: 0px 0px 10px 0px;
font-weight: 900;
}

.size__fonts__block {
display: flex;
}

.size__fonts__buttons__1 {
font-size: 12px;
}

.size__fonts__buttons__2 {
font-size: 18px;
}

.size__fonts__buttons__3 {
font-size: 22px;
}

.aktive {
border-width: 6px;
border-style: double;
cursor: default
}
</style>
</head>

<body>
<main>
<div class="title">Образец</div>
<div class="sample__text">
Таким образом, укрепление и развитие внутренней структуры говорит о возможностях дальнейших направлений развития.
Внезапно, сторонники тоталитаризма в науке освещают чрезвычайно интересные особенности картины в целом, однако
конкретныевыводы, разумеется, представлены в исключительно положительном свете. Внезапно, активно развивающиеся
страны третьего мира и по сей день остаются уделом либералов, которые жаждут быть превращены в посмешище, хотя
само их существование приносит несомненную пользу обществу.
</div>
<div class="title">Оформление</div>
<div class="general__blok">
<div class="color__fonts">
<div class="color__fonts__title">Цвет шрифта</div>
<div class="color__fonts__block">
<div class="button color__fonts__button__1 aktive">Аа</div>
<div class="button color__fonts__button__2">Аа</div>
</div>
</div>
<div class="size__fonts">
<div class="size__fonts__title">Размер шрифта</div>
<div class="size__fonts__block">
<div class="button size__fonts__buttons__1">0.5</div>
<div class="button size__fonts__buttons__2 aktive">1.0</div>
<div class="button size__fonts__buttons__3">1.5</div>
</div>
</div>
</div>
</main>
<script>

let body = document.querySelector("body");
let color__fonts__button__1 = document.querySelector(".color__fonts__button__1");
let color__fonts__button__2 = document.querySelector(".color__fonts__button__2");
let size__fonts__buttons__1 = document.querySelector(".size__fonts__buttons__1");
let size__fonts__buttons__2 = document.querySelector(".size__fonts__buttons__2");
let size__fonts__buttons__3 = document.querySelector(".size__fonts__buttons__3");


const button__1__state = localStorage.getItem("button__1__state");
const button__2__state = localStorage.getItem("button__2__state");
const button__3__state = localStorage.getItem("button__3__state");
const button__4__state = localStorage.getItem("button__4__state");
const button__5__state = localStorage.getItem("button__5__state");

if (button__1__state === "true") {
color__fonts__button__1.classList.add("aktive");
color__fonts__button__2.classList.remove("aktive");
body.classList.add("light");
body.classList.remove("black");
}

if (button__2__state === "true") {
color__fonts__button__2.classList.add("aktive");
color__fonts__button__1.classList.remove("aktive");
body.classList.add("black");
body.classList.remove("light");
}

if (button__3__state === "true") {
size__fonts__buttons__1.classList.add("aktive");
size__fonts__buttons__2.classList.remove("aktive");
size__fonts__buttons__3.classList.remove("aktive");
body.classList.add("size__1");
body.classList.remove("size__2");
body.classList.remove("size__3");
}

if (button__4__state === "true") {
size__fonts__buttons__1.classList.remove("aktive");
size__fonts__buttons__2.classList.add("aktive");
size__fonts__buttons__3.classList.remove("aktive");
body.classList.remove("size__1");
body.classList.add("size__2");
body.classList.remove("size__3");
}

if (button__5__state === "true") {
size__fonts__buttons__1.classList.remove("aktive");
size__fonts__buttons__2.classList.remove("aktive");
size__fonts__buttons__3.classList.add("aktive");
body.classList.remove("size__1");
body.classList.remove("size__2");
body.classList.add("size__3");
}

let colorFonts__1 = () => {

color__fonts__button__1.classList.add("aktive");
color__fonts__button__2.classList.remove("aktive");
body.classList.add("light");
body.classList.remove("black");
const button__1__state = color__fonts__button__1.classList.contains("aktive");

localStorage.setItem("button__1__state", button__1__state.toString());
localStorage.removeItem("button__2__state");
}
color__fonts__button__1.addEventListener("click", colorFonts__1);

let colorFonts__2 = () => {
color__fonts__button__2.classList.add("aktive");
color__fonts__button__1.classList.remove("aktive");
body.classList.add("black");
body.classList.remove("light");
const button__2__state = color__fonts__button__2.classList.contains("aktive");

localStorage.setItem("button__2__state", button__2__state.toString());
localStorage.removeItem("button__1__state");
}
color__fonts__button__2.addEventListener("click", colorFonts__2)

let fontSize__1 = () => {

size__fonts__buttons__1.classList.add("aktive");
size__fonts__buttons__2.classList.remove("aktive");
size__fonts__buttons__3.classList.remove("aktive");

body.classList.add("size__1");
body.classList.remove("size__2");
body.classList.remove("size__3");

const button__3__state = size__fonts__buttons__1.classList.contains("aktive");
const bodySize = body.classList.contains("size__1");

localStorage.setItem("button__3__state", button__3__state.toString());
localStorage.removeItem("button__4__state");
localStorage.removeItem("button__5__state");

}
size__fonts__buttons__1.addEventListener("click", fontSize__1);

let fontSize__2 = () => {

size__fonts__buttons__1.classList.remove("aktive");
size__fonts__buttons__2.classList.add("aktive");
size__fonts__buttons__3.classList.remove("aktive");

body.classList.remove("size__1");
body.classList.add("size__2");
body.classList.remove("size__3");

const button__4__state = size__fonts__buttons__2.classList.contains("aktive");
const bodySize = body.classList.contains("size__2");

localStorage.setItem("button__4__state", button__4__state.toString());
localStorage.removeItem("button__3__state");
localStorage.removeItem("button__5__state");

}
size__fonts__buttons__2.addEventListener("click", fontSize__2);

let fontSize__3 = () => {

size__fonts__buttons__1.classList.remove("aktive");
size__fonts__buttons__2.classList.remove("aktive");
size__fonts__buttons__3.classList.add("aktive");

body.classList.remove("size__1");
body.classList.remove("size__2");
body.classList.add("size__3");

const button__5__state = size__fonts__buttons__3.classList.contains("aktive");
const bodySize = body.classList.contains("size__3");

localStorage.setItem("button__5__state", button__5__state.toString());
localStorage.removeItem("button__3__state");
localStorage.removeItem("button__4__state");

}
size__fonts__buttons__3.addEventListener("click", fontSize__3);

</script>
</body>

</html>
voraa
29.04.2023, 11:30
Ну сделать функции для стандартных вещей.
Например ввести функцию

const setBodySize = (n) => {
body.classList.remove('size__1','size__1','size__3 ');
body.classList.add(`size__${n}`);
}


и вместо
body.classList.remove("size__1");
body.classList.remove("size__2");
body.classList.add("size__3");


писать

setBodySize (3);

С size__fonts__buttons__ придумать что то аналогичное
рони
29.04.2023, 17:23
Сергей Ракипов,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 18px;
}
body {
background-color: #fff;
color: #000;
font-size: 1rem;
}
.light {
background-color: #fff;
color: #000;
}
.black {
background-color: #000;
color: #fff;
}
.size__1 {
font-size: .8rem;
}
.size__2 {
font-size: 1rem;
}
.size__3 {
font-size: 1.2rem;
}
main {
max-width: 480px;
padding: 0px 20px 0px 20px;
margin: 0px auto 0px;
}
.title {
font-weight: 900;
font-size: 26px;
padding: 20px 0px 20px 0px;
}
.sample__text {
margin: 20px 0px 20px 0px;
}
.general__blok {
display: flex;
}
.button {
display: flex;
justify-content: center;
align-items: center;
border-width: 3px;
border-style: solid;
border-color: #F4A900;
border-radius: 50%;
width: 48px;
height: 48px;
margin: 0px 5px 0px 5px;
cursor: pointer;
}
.color__fonts {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0px 30px 0px 30px;
}
.color__fonts__title {
margin: 0px 0px 10px 0px;
font-weight: 900;
}
.color__fonts__block {
display: flex;
}
.color__fonts__button__1 {
background-color: #fff;
color: #000;
}
.color__fonts__button__2 {
background-color: #000;
color: #fff;
}
.size__fonts {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0px 30px 0px 30px;
}
.size__fonts__title {
margin: 0px 0px 10px 0px;
font-weight: 900;
}
.size__fonts__block {
display: flex;
}
.size__fonts__buttons__1 {
font-size: 12px;
}
.size__fonts__buttons__2 {
font-size: 18px;
}
.size__fonts__buttons__3 {
font-size: 22px;
}
.aktive {
border-width: 6px;
border-style: double;
cursor: default
}
</style>
</head>
<body>
<main>
<div class="title">Образец</div>
<div class="sample__text">
Таким образом, укрепление и развитие внутренней структуры говорит о возможностях дальнейших направлений развития. Внезапно, сторонники тоталитаризма в науке освещают чрезвычайно интересные особенности картины в целом, однако конкретныевыводы, разумеется,
представлены в исключительно положительном свете. Внезапно, активно развивающиеся страны третьего мира и по сей день остаются уделом либералов, которые жаждут быть превращены в посмешище, хотя само их существование приносит несомненную пользу
обществу.
</div>
<div class="title">Оформление</div>
<div class="general__blok">
<div class="color__fonts">
<div class="color__fonts__title">Цвет шрифта</div>
<div class="color__fonts__block">
<div class="button color__fonts__button__1 aktive">Аа</div>
<div class="button color__fonts__button__2">Аа</div>
</div>
</div>
<div class="size__fonts">
<div class="size__fonts__title">Размер шрифта</div>
<div class="size__fonts__block">
<div class="button size__fonts__buttons__1">0.5</div>
<div class="button size__fonts__buttons__2 aktive">1.0</div>
<div class="button size__fonts__buttons__3">1.5</div>
</div>
</div>
</div>
</main>
<script>
const body = document.querySelector("body");
const decor = {
'color': ['light', 'black'],
'size': ['size__1', 'size__2', 'size__3']
}
const state = {
'color': localStorage.getItem("state_color") ? localStorage.getItem("state_color") : 0,
'size': localStorage.getItem("state_size") ? localStorage.getItem("state_size") : 1
};
const set_decor = () => {
for (let sel in decor) {
body.classList.remove(...decor[sel]);
body.classList.add(decor[sel][state[sel]]);
}
}
set_decor();
for (let sel in decor) {
let div = document.querySelector(`.${sel}__fonts__block`);
const children = [...div.children];
const active_btn = () => children.forEach((btn, i) => btn.classList.toggle('aktive', i == state[sel]));
active_btn();
div.addEventListener('click', ({
target
}) => {
let index = children.indexOf(target);
if (index > -1) {
state[sel] = index;
localStorage.setItem(`state_${sel}`, index);
active_btn();
set_decor();
}
})
}
set_decor();
</script>
</body>
</html>
Сергей Ракипов
30.04.2023, 06:43
Ну сделать функции для стандартных вещей.
Например ввести функцию

const setBodySize = (n) => {
body.classList.remove('size__1','size__1','size__3 ');
body.classList.add(`size__${n}`);
}


и вместо
body.classList.remove("size__1");
body.classList.remove("size__2");
body.classList.add("size__3");


писать

setBodySize (3);

С size__fonts__buttons__ придумать что то аналогичное

Спасибо не знал что так можно писать.
Сергей Ракипов
30.04.2023, 06:46
рони,
Спасибо :thanks:
Но не все в этом коде понимаю пока для меня это сложно. Но выглядит хорошо нежели мой громоздкий .