Отчет рабочего времени.

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

Найти скрипт который бы отчитывал время не сложно.
Но мне не хватает знаний как сделать так что бы он ежедневно в одно и тоже время показывал сколько осталось до конца рабочего дня и а когда это время закончится он показывал сколько осталось до начало рабочего дня.

[рони]

Сергей Ракипов,
https://javascript.ru/forum/css-html...tml#post446717

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

У меня есть скрипт как работает меня устраивает, но не могу сообразить как сделать что бы он постоянно обновлялся.

То есть я загрузил страницу там все данные которые мне нужны, но проходит минута должно бы все изменится но не меняется

<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>

// JavaScript Document
let localTime = new Date;
let hours = localTime.getHours();
let minutes = localTime.getMinutes();
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 = 60;
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(hours <= 8){
    statys.innerHTML = `Закрыто`;
	statys.style.backgroundImage = "url('close.png')";
    }
    else if(hours >= 20){
    statys.innerHTML = `Закрыто`;
	statys.style.backgroundImage = "url('close.png')";
    }
    else if(hours >= 8){
    statys.innerHTML = `Открыто`;
	statys.style.backgroundImage = "url('open.png')";
    }
    }
openCloseStatys();

function remainsFun(){
    if(hours>=20){
    openClose = open;
    }
    else if(hours>=0&&hours<=8){
    openClose = open;
    }
    else if(hours>=8&&hours<=20){
    openClose = close;
    }
    }
remainsFun();   

function timeHours(){
    if(hours>=20&&hours<=23){
    rezult_1 = hoursOpen - hours + 24;
    }
    else if(hours>=0&&hours<=8){
    rezult_1 = hoursOpen - hours;
    }
    else if(hours>=8&&hours<=20){
    rezult_1 = hoursClose - hours;
    }
    }
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();

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>=5&&rezult_1<=23){
    endingHour = endingHour_2[2];
    }
    }
endingHourFun();

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;
    }
    }
endingMinutFun();

    
currentTime.innerHTML = `Текущие время`;
hoursInput.innerHTML = `${hours}`;
minutesInput.innerHTML = `${minutes}`;
remains.innerHTML = `${openClose}${rezult_1} ча${endingHour} ${rezult_2} минут${endingMinut}`;

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

И еще в этом скрипте работает так
остаток время показывает так
к примеру осталось
9 часов и 60 минут
как это исправить?

[voraa]

Все функции надо вызывать циклически.
Т.е вставить все вызовы туда, где отсчитываются секунды
И то, что должно меняться туда же

function sec() {
    if(dot.style.color == "black") {
    dot.style.color = "white";
    }
    else {
    dot.style.color = "black";
    }
// тут вызовы функций в необходимой последовательности
   openCloseStatys();
   remainsFun();
   ......
  hoursInput.innerHTML = `${hours}`;
  minutesInput.innerHTML = `${minutes}`;
  remains.innerHTML = `${openClose}${rezult_1} ча${endingHour} ${rezult_2} минут${endingMinut}`;

}

Вот этого
function remainsFun(){
if(hours>=20){
openClose = open;
}
else if(hours>=0&&hours<=8){
openClose = open;
}
else if(hours>=8&&hours<=20){
openClose = close;
}
}
remainsFun();

function timeHours(){
if(hours>=20&&hours<=23){
rezult_1 = hoursOpen - hours + 24;
}
else if(hours>=0&&hours<=8){
rezult_1 = hoursOpen - hours;
}
else if(hours>=8&&hours<=20){
rezult_1 = hoursClose - hours;
}
}
timeHours();

быть не должно. Зачем вызывать функцию сразу после ее определения?

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

Не чего не понял, я только учусь

[voraa]

Трудно сказать, что не так, когда почти все не так.

Ну попробуйте разобраться в этом примере, что бы учиться

<!DOCTYPE>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
const hoursOpen = 8;
const hoursClose = 20;

const open = "До открытия ";
const close = "До закрытия ";
let openClose = "";
 
function openCloseStatys(ch){
	let statys = document.getElementById("statys");
    if(ch < hoursOpen || ch >= hoursClose){
		statys.innerHTML = `Закрыто`;
		statys.style.backgroundImage = "url('close.png')";
		openClose = open;
    } else{
		statys.innerHTML = `Открыто`;
		statys.style.backgroundImage = "url('open.png')";
		openClose = close;
    }
}
 
function remTime(ch, cm){
	let remmin
    if(hoursOpen<= ch && ch < hoursClose){
		remmin = hoursClose*60 - (ch*60 + cm);
    } else {
		remmin  = hoursOpen*60 - (ch*60 + cm);
		if (remmin<0) remmin += 24*60;
	}
	return [remmin/60 | 0, remmin % 60];
}

const ends =[['ов','','а'],['','а','ы']]
 
function endingWord(word, n, type){
	let te = 1
	n = (n | 0) % 100
	const dec = n / 10
	const ed = n % 10
    if (ed == 0 || ed >= 5 || dec == 1) te = 0;
    else if (2 <= ed &&  ed <= 4) te = 2;
    
    return word + ends[type][te]
}

let mig = false;

function sec() {
	let localTime = new Date;
	let hours = localTime.getHours();
	let minutes = localTime.getMinutes();
	let dot = document.getElementById("dot");
   if(mig) {
		dot.style.visibility = "visible";
    } else {
		dot.style.visibility = "hidden";
    }
    mig = !mig
    
	document.getElementById("hours").innerHTML = ('0'+hours).slice(-2);
	document.getElementById("minutes").innerHTML = ('0'+minutes).slice(-2);
	openCloseStatys(hours);
	const [remh, remm] = remTime(hours, minutes)
	document.getElementById("remains").innerHTML = `${openClose} ${remh} ${endingWord('час', remh, 0)} ${remm} ${endingWord('минут', remm, 1)}`;
	setTimeout(sec, 1000)
 }

document.addEventListener('DOMContentLoaded', () => {
	sec()
})
</script>
 </head>
 <body>
<div id="work_schedule">
	<div id='curtime'>
        <span id="current_time" class="line">Текущее время </span>
        <span id="hours" class="line"></span>
        <span id="dot" class="line">:</span>
        <span id="minutes" class="line"></span>
    </div>
    <div id='remtime'> 
        <span id="statys"></span>
        <span id="remains"></span>
    </div>
 </div>
 </body>
</html>

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

Спасибо, но я из того что там написано много что не знаю.

Я понимаю что эту задачу можно решить и по другому и наверняка и даже ваш код можно улучшить.
Что вы в принципе и сделали.
Но мне на моем уровне пока.

Как сделать что бы код всегда был "работал а не только во время загрузки"
и как убрать 60 минут
исходя из моего кода

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

Мне в моем варианте все понятно до последнего символа, и когда нибудь я буду писать по другому, но на пока мне нужно сделать из исходя и моего уровня знаний

[рони]

Сергей Ракипов,
время надо учитывать в комплексе (часы + минуты), так будет проще.
всё перевести в минуты, а перед выводом разбить на часы и минуты.