Трудно сказать, что не так, когда почти все не так.
Ну попробуйте разобраться в этом примере, что бы учиться
<!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>