И я не знаю как более коротко и оптимально написать. Вот к примеру 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>
И еще как то можно сделать что бы время всегда было "он лайн" а не только когда страница обновится.