Форум

voraa · #11 (**permalink**) 12.04.2020, 12:04

Что бы ваш код работа, его нужно переделывать. Почти весь.
У Javascript есть некоторые вещи, которые всегда надо учитывать в коде.
Например, обращение к элементам html на странице, возможно только тогда, когда она загрузится и создастся дерево DOM.

В моем коде строки 72-74 это ожидание загрузки с создания DOM, и только после этого вызывается основная функция sec при работе которой и идут всякие обращения к элементам.

В вашем коде вы один раз получили время, и все. Его же каждый раз новое получать надо. Это делается в функции sec (строки 53-55). Так же каждый раз как (каждую секунду) надо изменять всякие надписи (строки 64-69).

А вы задали вызов sec каждую секунду и все. Ну по идее она будет (быть может) показывать и гасить двоеточие. И все. Она ни время не обновляет, ни содержимое html не меняет.
То, что вы описали какую то функцию (скажем openCloseStatys), а потом сразу ее вызвали, это значит, что она один раз отработает и все. Если конечно не возникнет ошибок, что элементы DOM к этому времени уже определены

рони · #12 (**permalink**) 12.04.2020, 12:52

Сергей Ракипов,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
<body>
  <div id="work_schedule">
    <p id="current_time" class="line"></p>
    <p id="hours" class="line"></p>
    <p id="dot" class="line">:</p>
    <p id="minutes" class="line"></p>
    <p id="statys"></p>
    <p id="remains"></p>
  </div>
  <script>
   // JavaScript Document
   let hours;
   let minutes;
   let time;
   let dot = document.getElementById("dot");
   dot.style.color = "black";
   let currentTime = document.getElementById("current_time");
   let hoursInput = document.getElementById("hours");
   let minutesInput = document.getElementById("minutes");
   let statys = document.getElementById("statys");
   let remains = document.getElementById("remains");
   let hoursOpen = 8;
   let hoursClose = 20;
   let oneMinuts = 0;
   let rezult_1 = "";
   let rezult_2 = "";
   let endingHour = "";
   let endingHour_2 =["с", "са", "сов"];
   let endingMinut = "";
   let endingMinut_2 =["a", "ы"];
   let open = "До отрытия ";
   let close = "До закрытия ";
   let openClose = "";
   function sec() {
     if(dot.style.color == "black") {
       dot.style.color = "white";
     }
     else {
       dot.style.color = "black";
     }
   }
   setInterval(sec, 1000);
   function openCloseStatys() {
     if(time < hoursOpen * 60) {
       statys.innerHTML = `Закрыто`;
       statys.style.backgroundImage = "url('close.png')";
       openClose = open;
       time = hoursOpen * 60 - time;
     }
     else if(time >= hoursClose * 60) {
       statys.innerHTML = `Закрыто`;
       statys.style.backgroundImage = "url('close.png')";
       openClose = open;
       time = hoursOpen * 60 + 24 * 60 - time;
     }
     else {
       statys.innerHTML = `Открыто`;
       statys.style.backgroundImage = "url('open.png')";
       openClose = close;
       time = hoursClose * 60 - time
     }
   }
   function timeHours() {
     rezult_1 = Math.floor(time / 60);
   }
   function timeMinuts() {
     rezult_2 = time % 60;
   }
   function timeZero(num) {
     if(num < 10) {
       num = "0" + num;
     }
     return num
   }
   function endingHourFun() {
     if(rezult_1==1) {
       endingHour = endingHour_2[0];
     }
     else if(rezult_1>=2&&rezult_1<=4) {
       endingHour = endingHour_2[1];
     }
     else if(rezult_1 == 0 ||rezult_1>=5&&rezult_1<=23) {
       endingHour = endingHour_2[2];
     }
   }
   function endingMinutFun() {
     if(rezult_2==1) {
       endingMinut = endingMinut_2[0];
     }
     else if(rezult_2>=2&&rezult_2<=4) {
       endingMinut = endingMinut_2[1];
     }
     else if(rezult_2>=5&&rezult_2<=20) {
       endingMinut = endingMinut;
     }
     else if(rezult_2==21) {
       endingMinut = endingMinut_2[0];
     }
     else if(rezult_2>=22&&rezult_2<=24) {
       endingMinut = endingMinut_2[1];
     }
     else if(rezult_2>=25&&rezult_2<=30) {
       endingMinut = endingMinut;
     }
     else if(rezult_2==31) {
       endingMinut = endingMinut_2[0];
     }
     else if(rezult_2>=32&&rezult_2<=34) {
       endingMinut = endingMinut_2[1];
     }
     else if(rezult_2>=35&&rezult_2<=40) {
       endingMinut = endingMinut;
     }
     else if(rezult_2==41) {
       endingMinut = endingMinut_2[0];
     }
     else if(rezult_2>=42&&rezult_2<=44) {
       endingMinut = endingMinut_2[1];
     }
     else if(rezult_2>=45&&rezult_2<=50) {
       endingMinut = endingMinut;
     }
     else if(rezult_2==51) {
       endingMinut = endingMinut_2[0];
     }
     else if(rezult_2>=52&&rezult_2<=54) {
       endingMinut = endingMinut_2[1];
     }
     else if(rezult_2>=55&&rezult_2<=60) {
       endingMinut = endingMinut;
     }
   }
   function loop()
   {
     let localTime = new Date;
     hours = localTime.getHours();
     minutes = localTime.getMinutes();
     time = hours * 60 + minutes;
     openCloseStatys();
     timeHours();
     timeMinuts();
     endingHourFun();
     endingMinutFun();
     currentTime.innerHTML = `Текущие время`;
     hoursInput.innerHTML = `${timeZero(hours)}`;
     minutesInput.innerHTML = `${timeZero(minutes)}`;
     remains.innerHTML = `${openClose}${timeZero(rezult_1)} ча${endingHour} ${timeZero(rezult_2)} минут${endingMinut}`;
     window.setTimeout(loop, 1000);
   }
   loop()
  </script>
</body>
</html>

Сергей Ракипов · #13 (**permalink**) 14.04.2020, 05:52

рони,
Как я понял что бы время постоянно обновлялось было добавлено

window.setTimeout(loop, 1000);
которое говорит, окну запускать функцию loop раз в секунду.

И вот это мне не до конца понятно

function timeHours() {
     rezult_1 = Math.floor(time / 60);
   }
   function timeMinuts() {
     rezult_2 = time % 60;
   }
   function timeZero(num) {
     if(num < 10) {
       num = "0" + num;
     }
     return num
   }

Я не понимаю вот этого условия
(time < hoursOpen * 60)
(time >= hoursClose * 60)

И не понимаю вот этого действия

time = hoursOpen * 60 - time;
time = hoursOpen * 60 + 24 * 60 - time;
time = hoursClose * 60 - time

рони · #14 (**permalink**) 14.04.2020, 07:55

Сообщение от Сергей Ракипов

И не понимаю вот этого действия

time = hoursOpen * 60 - time;

time вначале это время в минутах от начала дня, а затем время в минутах до открытия или закрытия.
условно сейчас 5 : 0 утра значит 5 * 60 + 0= 300 минут.
открытие в 8, 8 * 60 = 480 минут.
разница 480 - 300 = 180 минут. time = hoursOpen * 60 - time;
180 сколько это часов Math.floor(time / 60) = 3 часа
остаток минут от 180, time % 60 = 0 минут.
текущее время 5(часов) надо добавить до 05, делаем это с помощью timeZero
0(минут) надо добавить до 00, делаем это с помощью timeZero
итого: текущее время 05 : 00
до открытия осталось 3 часа 0 минут.

Сообщение от Сергей Ракипов

Я не понимаю вот этого условия
(time < hoursOpen * 60)
(time >= hoursClose * 60)

время сейчас меньше времени открытия? (time < hoursOpen * 60) да/нет(true/false)
время сейчас больше времени закрытия или равно? (time >= hoursClose * 60) да/нет(true/false)

Сергей Ракипов · #15 (**permalink**) 15.04.2020, 05:04

рони,
Все понял! спасибо!

Форум

Справочник

Discord чат

Курсы javascript