Javascript-форум - Оптимизация на js

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Оптимизация на js (https://javascript.ru/forum/misc/45500-optimizaciya-na-js.html)

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

Всем привет, я снова нуждаюсь в помощи знающих 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>";

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

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

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

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

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

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

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

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

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

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

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

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

Теперь вот какая проблема. Без проблем никуда))!

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

Вот целый скрипт. Нуууу вроде пока что держится))
Да не спорю она правильно показывает то время когда офис закрыт. Но почему она не будет показывать время когда она открыта??? Ну допустим до закрытия осталось сколько то часов

Все очень криво у тебя и много лишнего например минуты, дни, секунды и другая ересь, зачем тебе?
Учись думать и читать.
Ты даже сам не подумав над проблемой, не попробовав ее решить, сюда пишешь.
Сравнил бы, чем отличается вывод, когда офис закрыт и когда он открыт, увидел бы, что там есть не сложное математическое выражение, немного поменяв которое, добился бы нужного результата.

<!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 = 11,
worktime = 12;
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>

Zuenf у тебя скрипт не будет автоматически обновляться. Допустим сейчас 23:59 и на сайте написано "Офис закрыт до открытия 12 часов" и я сижу на сайте, наступило 24:00 но на сайте так и будет стоять "Офис закрыт до открытия 12 часов". А чтобы результат поменялся на 11 часов я должен в ручную страницу обновить. Прочитай пожалуйста ниже

:help:

Сделайте пожалуйста оптимизированный скрипт кто нибудь. Если это возможно то и с минутами. Я ясно объясню что мне нужно. У нас есть офис и сайт. На сайте в боковом блоке должна выходить надпись там офис открыт до открытия/закрытия осталось сколько то часов и сколько то минут! Воскресенье выходной день. Чтобы так и писало))) Офис работает до 18:00 и открывается утром в 09:00. И мне надо чтобы скрипт обновлялся автоматически на подобии этой http://javascript.ru/forum/misc/4538...vremeni-2.html.
Вот там на второй странице отписался alex33 ну там написал document.write это зло и т.д. Вот под этот скрипт там автоматическое обновление причём не перезагружая странцу. Допустим я захожу в 23:59 и на сайте написано "Офис закрыт до открытия осталось 10 часов" И когда будет ровно 24:00 будет написано "Офис закрыт до открытия осталось 9 часов" При этом страница не обновляется это похоже на обратный отсчёт только с циклом). Но проблема в том что в скрипте alex33 очень много строчек, а я хочу чуть поменьше и чтобы работало точно так же. А если это возможно то и с минутами. Заранее спасибо тому кто это сможет сделать. Я новичок просто в Js поэтому никак не могу разобраться