|
Получается огромный код
У меня вот какая задача.
Нужно что бы в блок появлялся в определенный день недели и в этот день был до определенного дня, при этом показывал время сколько осталось этому блоку "жить" а потом исчезал. К примеру в субботу до 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>
|
| Часовой пояс GMT +3, время: 10:23. |
|