Что бы ваш код работа, его нужно переделывать. Почти весь.
У Javascript есть некоторые вещи, которые всегда надо учитывать в коде. Например, обращение к элементам html на странице, возможно только тогда, когда она загрузится и создастся дерево DOM. В моем коде строки 72-74 это ожидание загрузки с создания DOM, и только после этого вызывается основная функция sec при работе которой и идут всякие обращения к элементам. В вашем коде вы один раз получили время, и все. Его же каждый раз новое получать надо. Это делается в функции sec (строки 53-55). Так же каждый раз как (каждую секунду) надо изменять всякие надписи (строки 64-69). А вы задали вызов sec каждую секунду и все. Ну по идее она будет (быть может) показывать и гасить двоеточие. И все. Она ни время не обновляет, ни содержимое html не меняет. То, что вы описали какую то функцию (скажем openCloseStatys), а потом сразу ее вызвали, это значит, что она один раз отработает и все. Если конечно не возникнет ошибок, что элементы DOM к этому времени уже определены |
таймер время работы магазина
Сергей Ракипов,
<!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>
|
рони,
Как я понял что бы время постоянно обновлялось было добавлено 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 |
Цитата:
условно сейчас 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 >= hoursClose * 60) да/нет(true/false) |
рони,
Все понял! спасибо! |
| Часовой пояс GMT +3, время: 13:24. |