Оптимизация на js

[HelpMe01]

Всем привет, я снова нуждаюсь в помощи знающих js. На этот раз я хотел оптимизировать код который у меня чуть не на 100 строчек. Пример вот такой:

if (hours>=8 && hours<9) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия остался<span style='color:orange;font:16px Tahoma;'><b> 1 час</b></span></b></center>";

Таких кодов у меня очень много. Как вы наверное уже догадались, каждый час у меня выходит надпись до закрытия осталось там $H часов. Ну так вот вопрос вот в чём. Дело в том что такие коды набраны вручную а именно примерно вот так:

if (hours>=18 && hours<19) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 15 часов</b></span></b></center>";
                            if (hours>=19 && hours<20) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 14 часов</b></span></b></center>";
                            if (hours>=20 && hours<21) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 13 часов</b></span></b></center>";
                            if (hours>=21 && hours<22) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 12 часов</b></span></b></center>";
                            if (hours>=22 && hours<23) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 11 часов</b></span></b></center>";
                            if (hours>=23 && hours<24) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 10 часа</b></span></b></center>";
                            if (hours>=24 && hours<1) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 9 часов</b></span></b></center>";
                            if (hours>=1 && hours<2)elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 8 часов</b></span></b></center>"; 
                            if (hours>=2 && hours<3) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 7 часов</b></span></b></center>"; 
                            if (hours>=3 && hours<4) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 6 часов</b></span></b></center>"; 
                            if (hours>=4 && hours<5) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 5 часов</b></span></b></center>"; 
                            if (hours>=5 && hours<6) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 4 часа</b></span></b></center>"; 
                            if (hours>=6 && hours<7) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 3 часов</b></span></b></center>"; 
                            if (hours>=7 && hours<8) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 2 часа</b></span></b></center>"; 
                            if (hours>=8 && hours<9) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия остался<span style='color:orange;font:16px Tahoma;'><b> 1 час</b></span></b></center>";

А как это сделать так чтобы допустим весь этот код который был выше можно было написать в две строчки допустим вот так:

if (hours>=8 && hours<20) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия остался<span style='color:orange;font:16px Tahoma;'><b> $H час</b></span></b></center>";

Вот как это реализовать? Заранее спасибо

[Zuenf]

Господь мой милостивый! Это божественно... кривой мозг, раз до такого додумался.
Как-то так наверное:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div id="test"></div>
<script>
var testElem = document.getElementById('test'),
now = new Date().getHours(),
openofficehour = 9,
worktime = 10;
if(24-(24-now+openofficehour-1)%24>worktime){
testElem.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось "+(24-now+openofficehour)%24+" часов<span style='color:orange;font:16px Tahoma;'><b></b></span></b></center>"
}else{
testElem.innerHTML = "<center><b>Офис<span style='color:green;font:16px Tahoma;'> <b>ОТКРЫТ</b></span><span style='color:orange;font:16px Tahoma;'><b></b></span></b></center>"
}
</script>
</body>
</html>

[HelpMe01]

Спасибо вот эта часть очень полезная

openofficehour = 9,
worktime = 10;
if(24-(24-now+openofficehour-1)%24>worktime){
testElem.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось "+(24-now+openofficehour)%24+" часов<span style='color:orange;font:16px Tahoma;'><b></b></span></b></center>"
}else{
testElem.innerHTML = "<center><b>Офис<span style='color:green;font:16px Tahoma;'> <b>ОТКРЫТ</b></span><span style='color:orange;font:16px Tahoma;'><b></b></span></b></center>"

Остальное у меня было просто я не весь код дал) Спасибо!

[HelpMe01]

Спасибо что сделал но вышла одна проблемка. Вот мой весь код!
Здесь у меня стоит автоматическое обновление. А именно допустим сейчас 22:59, вот если будет 23:00 скрипт обновится автоматически (не обновляя страницу) и будет написано допустим офис закрыт до открытия сколько то часов. Пример тут 22:00 был (офис закрыт до открытия 11 часов), то как наступит 23:00 она автоматически сменит надпись на (офис закрыт до открытия 10 часов) вот так. А у тебя приходится в ручную обновлять страницу чтобы поменять результат. Вот как сделать чтобы результат менялся автоматически причём не обновляя страницу. Вот проверь этот скрипт который я дал тебе и ты всё поймёшь)) Заранее спасибо

[HelpMe01]

<html>
<head>
<title>закрытие по времени</title>
<script type="text/javascript">
window.onload = function() {
tm1 = window.setInterval(function() {
var elemDnm = document.getElementById("dnm");
now=new Date(); 
var hours=now.getHours() 
var days=now.getDay();
var min=now.getMinutes();   
var sec=now.getSeconds();                            
var text 
var myDate = '0';
var current = new Date;

                            if (hours>=9 && hours<10) elemDnm.innerHTML = "<center><b>Офис<span style='color:blue;font:16px Tahoma;'> <b>ОТКРЫТ</b></span>, до закрытия осталось<span style='color:orange;font:16px Tahoma;'><b> 9 часов</b></span></b></center>";
                            if (hours>=10 && hours<11) elemDnm.innerHTML = "<center><b>Офис<span style='color:blue;font:16px Tahoma;'> <b>ОТКРЫТ</b></span>, до закрытия осталось<span style='color:orange;font:16px Tahoma;'><b> 8 часов</b></span></b></center>";  
                            if (hours>=11 && hours<12) elemDnm.innerHTML = "<center><b>Офис<span style='color:blue;font:16px Tahoma;'> <b>ОТКРЫТ</b></span>, до закрытия осталось<span style='color:orange;font:16px Tahoma;'><b> 7 часов</b></span></b></center>";       
                            if (hours>=12 && hours<13) elemDnm.innerHTML = "<center><b>Офис<span style='color:blue;font:16px Tahoma;'> <b>ОТКРЫТ</b></span>, до закрытия осталось<span style='color:orange;font:16px Tahoma;'><b> 6 часов</b></span></b></center>";
                            if (hours>=13 && hours<14) elemDnm.innerHTML = "<center><b>Офис<span style='color:blue;font:16px Tahoma;'> <b>ОТКРЫТ</b></span>, до закрытия осталось<span style='color:orange;font:16px Tahoma;'><b> 5 часов</b></span></b></center>";
                            if (hours>=14 && hours<15) elemDnm.innerHTML = "<center><b>Офис<span style='color:blue;font:16px Tahoma;'> <b>ОТКРЫТ</b></span>, до закрытия осталось<span style='color:orange;font:16px Tahoma;'><b> 4 часа</b></span></b></center>";
                            if (hours>=15 && hours<16) elemDnm.innerHTML = "<center><b>Офис<span style='color:blue;font:16px Tahoma;'> <b>ОТКРЫТ</b></span>, до закрытия осталось<span style='color:orange;font:16px Tahoma;'><b> 3 часа</b></span></b></center>";
                            if (hours>=16 && hours<17) elemDnm.innerHTML = "<center><b>Офис <span style='color:blue;font:16px Tahoma;'> <b>ОТКРЫТ</b></span>, до закрытия осталось<span style='color:orange;font:16px Tahoma;'><b> 2 часа</b></span></b></center>";
	        		        if (hours>=17 && hours<18) elemDnm.innerHTML = "<center><b>Офис<span style='color:blue;font:16px Tahoma;'> <b>ОТКРЫТ</b></span>, до закрытия осталось<span style='color:orange;font:16px Tahoma;'><b> 1 час</b></span></b></center>";
                            if (hours>=18 && hours<19) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 15 часов</b></span></b></center>";
                            if (hours>=19 && hours<20) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 14 часов</b></span></b></center>";
                            if (hours>=20 && hours<21) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 13 часов</b></span></b></center>";
                            if (hours>=21 && hours<22) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 12 часов</b></span></b></center>";
                            if (hours>=22 && hours<23) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 11 часов</b></span></b></center>";
                            if (hours>=23 && hours<24) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 10 часа</b></span></b></center>";
                            if (hours>=24 && hours<1) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 9 часов</b></span></b></center>";
                            if (hours>=1 && hours<2)elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 8 часов</b></span></b></center>"; 
                            if (hours>=2 && hours<3) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 7 часов</b></span></b></center>"; 
                            if (hours>=3 && hours<4) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 6 часов</b></span></b></center>"; 
                            if (hours>=4 && hours<5) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 5 часов</b></span></b></center>"; 
                            if (hours>=5 && hours<6) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 4 часа</b></span></b></center>"; 
                            if (hours>=6 && hours<7) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 3 часов</b></span></b></center>"; 
                            if (hours>=7 && hours<8) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия осталось<span style='color:orange;font:16px Tahoma;'><b> 2 часа</b></span></b></center>"; 
                            if (hours>=8 && hours<9) elemDnm.innerHTML = "<center><b>Офис<span style='color:red;font:16px Tahoma;'> <b>ЗАКРЫТ</b></span>, до открытия остался<span style='color:orange;font:16px Tahoma;'><b> 1 час</b></span></b></center>";                             
                            if (days=0) elemDnm.innerHTML = "<center><b><span style='color:green;font:16px Tahoma;'>Офис ЗАКРЫТ, нерабочий день! Открытие в Понедельник</span><span style='color:orange;font:16px Tahoma;'><b> 09:00</b></span></b></center>";
}, 5000); };
        </script>
</head>
<body>
<!-- content -->
<div id="dnm"><p>
    <center><b><span style='color:red;font:16px Tahoma;'>Загрузка...</span></b></center>
</p></div>
<!-- content -->
</body>
</html>

[Zuenf]

Смотри как было сделано, анализируй и пытайся повторить. И почитай про setIntervel и setTimeout

[HelpMe01]

пытаюсь но результата 0 =( Помоги плиииз

[HelpMe01]

АЛЛИЛУЯЯЯ СПАСИБО. ПОЛУЧИЛОООООСЬ))) Спасибо огромное тебе плюсики)

[Zuenf]

Молодец!

[skrudjmakdak]

а что именно не получается?? скрипт вообще не запускается или таймауты не правильно отрабатывают?? в консоль что падает??