Получается огромный код
У меня вот какая задача.
Нужно что бы в блок появлялся в определенный день недели и в этот день был до определенного дня, при этом показывал время сколько осталось этому блоку "жить" а потом исчезал. К примеру в субботу до 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>
|
И я не знаю как более коротко и оптимально написать. Вот к примеру 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>
И еще как то можно сделать что бы время всегда было "он лайн" а не только когда страница обновится. |
расписание собраний
Цитата:
<!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>
|
рони,
Если честно то я вообще не понял что там. Можно хотя бы в двух словах по какому принципу там все работает а я уж как нибудь разберусь |
Сергей Ракипов,
:-? есть массив когда выводить сообщение begin, что выводить title, в какой день недели weekday . массив фильтруется filter выбираются все элементы на текущий день weekday == day (например суббота - weekday: 6) сравнивается время между текущим и временем начала long - формируются остальные сообщения -- массив сообщений преобразуется в блок render -- блоки объединяются renderHtml -- и выводятся раз в минуту на страницу. если время больше 21 часа, ничего не выводится, только текущие день и время. выше для теста сделал вывод сообщений в субботу(строка 114, потом убрать, вернуть 113) код меняется, перед копированием обновить страницу. |
Что то слишком сложно или я не правильно донес свою мысль.
Вот смотри есть организация которая оказывает психологическую помощь виде проведение собраний. Они проводят это каждый день в разное время. И я им создаю страницу. На которой человек можете получить информацию какие сегодня (именно сегодня, если это суббота то ему покажут только субботу если это воскресение то ему покажут только воскресение) и время через сколько начнется собрание. Если собрание идет то появится надпись что идет собрание. Как только собрание закончится (оно идет час) то на странице пропадет информация о собрании. И как я вижу что я написал блок в него внес нужную информацию(какой собрание. для кого оно и т.д.) и в скрипте отметил что оно проходит во вторник с 20:00 до 21:00 и таких блоков у меня может быть 150 штук. А вашем скрипте я вижу пятница суббота не понятно как мне блок отметить что он проходит тогда то и во столько то. Вот мне нужно создать 150 блоков и в скрипте как то отметить для каждого свой день и время. И что бы скрипт когда приходил день и время отрабатывал как нужно. Вот пример там без времени но они выводятся по принципу какой день и в порядке приближение времени. https://na-msk.ru/ Блок собрание которые скоро начнутся. Мне будет досточно что блоку в определенный день будет поставлен display:block а как его время закончится display:none |
Сергей Ракипов,
скрипт делает всё что вы описали, вам нужно только указать данные и всё. от вас же требуется создать только { title: 'Собрание в Суббота', begin: { hh: 20, mm: 0 }, weekday: 6 } , столько раз сколько вам нужно. зачем вам все блоки на странице, если нужны только в данный день и час |
Сергей Ракипов,
добавить только продолжительность собрания в данные. |
рони,
ААА !!! вон как это работает!!! ОГО это даже превзошло все мои ожидание! А если собрание идет 1:15 то нужно соответственно поставить 75 000 mm: 0 это минуты если в 19:30 начинается нужно mm: 30 поставить? а что это const formatter = new Intl.DateTimeFormat("ru", { hour: "2-digit", minute: "2-digit" ?? |
Сергей Ракипов,
добавлена продолжительность собрания
<!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>
|
Цитата:
|
рони,
Спасибо. Вы помогли многим зависимым. Я это делаю для них бесплатно. |
Цитата:
|
Сергей Ракипов,
обновить перед копированием или запуском на просмотр, исправлены мелкие ошибки. |
Цитата:
|
Что то я в себя поверил и не рассчитал силы. Думал этот код заверстаю под нужный дизайн. Не получается. А можно все таки блоку придать день и время. Вот в этот дизайн и там проще сделать блок
Вот как я понимаю блоки с классом 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>
|
Сергей Ракипов,
а можно вместо class="sobranie_sreda" и nachalo_20_00 будет data-weekday="3" и data-begin="20,00" ? |
рони,
Да конечно это же не принципиально лишь бы работало. |
расписание собраний инициализация из 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>
|
рони,
Вы дописали еще возможность получить информацию о том сколько времени идет собрание. Но дело в том что собрание бывают 1 час, 1 час 15 минут, 1 час 30 минут и возможно даже 2 часа. И это в принципе не нужно. Нужно просто надпись что собрание идет а сколько идет или сколько осталось это не так важно. А когда оно закончится просто убрать блок. То есть была где то возможность что бы было возможность до сколько это будет собрание или просто продолжительность |
Цитата:
|
Цитата:
|
то есть я имею виду что продолжительность нужно устанавливать в скрипте, информацию выводить нужно только виде надпись что собрание идет. К примеру одна группа проводит по среда собрание продолжительность 1:15 а другая в 1 час ровно
И я хочу в скрипте отметить что одной группе 1:15 была надпись собрание идет а к другой группе я могу отметить что она идет 1 час и там тоже когда начнется собрание просто надпись что идет собрание. Мне не удобно казаться человеку которому помогают а он не может нормально с первого раза все объяснить и дергает по пустякам. |
Цитата:
|
Сергей Ракипов,
и для статуса элемент добавьте. |
Сергей Ракипов,
будет так
<div class="cherez_ckolko">
<div data-duration="1_15"></div>
<div data-status="Собрание Начнется через:_Собрание идет:"></div>
<div data-begin="15_00"></div>
</div>
устраивает? |
рони,
hour += 1;
minute += 0; // продолжительность собрание
Вот тут я понял могу поставить продолжительность собрание, но я это сделаю для всех собраний, а как сделать что для одного час для другого два часа. |
рони,
<div data-duration="1_15"></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;
--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>
|
Сергей Ракипов,
в каждом блоке вам нужно правильно указать четыре атрибута data-... , согласно этим данным блок будет виден или нет, а также будет выводится время до и сколько уже идёт. |
рони,
ИДЕАЛЬНО! :yes: |
рони,
Да там все понятно, спасибо |
рони,
Но только не 4 а три, день, время и продолжительность, я просто переспрошу на всякий случай. |
Сергей Ракипов,
четыре!!! data-weekday="2" data-duration="1_15" data-status="Собрание Начнется через:_Собрание идет:" data-begin="15_00" |
рони,
А я даже в расчет не взял это с ними все хорошо их даже менять не нужно ))) |
Сергей Ракипов,
удачи!))) |
Помогите сократить код. Если это возможно.
Это просто код который меняет оформление.
<!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>
|
Ну сделать функции для стандартных вещей.
Например ввести функцию
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__ придумать что то аналогичное |
Смена оформления с запоминанием
Сергей Ракипов,
<!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>
|
Цитата:
|
| Часовой пояс GMT +3, время: 20:29. |