Как сделать смену фона по времени суток без перезагрузки страницы?

Question

[Way]

Как сделать смену фона по времени суток без перезагрузки страницы? С примером!
У меня есть такой код:

<?php
$now_hours = date('G');
if($now_hours<8)
{
$vremya = 'noch';
}
elseif($now_hours<12 && $now_hours>=8 )
{
$vremya = 'utro';
}
elseif($now_hours>=12 && $now_hours<17)
{
$vremya = 'den';
}
elseif($now_hours>=17 && $now_hours<=20)
{
$vremya = 'vecher';
}
?>

И стиль:

/* Ночь */
.vremya-noch {
background:url("https://изображение.jpg");
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
transition: background 0.5s ease;
}
/* Утро */
.vremya-utro {
background:url("https://изображение.jpg");
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
transition: background 0.5s ease;
}
/* День */
.vremya-den {
background:url("https://изображение.jpg");
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
transition: background 0.5s ease;
background-size: 100%;
}
/* Вечер */
.vremya-vecher {
background:url("https://изображение.jpg");
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
transition: background 0.5s ease;
}

Answer 1

[enixpp]

var check = function () {
    var hours = new Date().getHours();

    if (hours < 8) {
        document.body.classList.add('.noch');
        document.body.classList.remove('.vecher');
    }
    elseif(hours < 12 && hours >= 8) {
        document.body.classList.add('.utro');
        document.body.classList.remove('.noch');
    }
    elseif(hours >= 12 && hours < 17) {
        document.body.classList.add('.den');
        document.body.classList.remove('.utro');
    }
    elseif(hours >= 17 && hours <= 20) {
        document.body.classList.add('.vecher');
        document.body.classList.remove('.den');
    }
}

Comments

[Way]

Спасибо вам.

Answer 2

[olamedia .]

var check = function(){
  // здесь проверка и смена фона
};
setInterval(check, 60000); // выполняется раз в минуту, чтобы не слишком нагружать
check(); // выполнить один раз сразу, если фон накладывается только яваскриптом

Comments

[Way]

Хм, а можно пример проверки и смены фона на JS?

[Sergej]

Юрий Андрианов: Вам показали.
В чеке делаете условие по времени и подставляете фон.

[Way]

Иван: я JS не знаю, просто знаю, что можно без перезагрузки страницы обновлять скрипт.

[olamedia .]

Юрий Андрианов: а, я даже не заметил, что код в вопросе - на php, на яваскрипте тот же самый будет, кроме date():
$now_hours = (new Date()).getHours();

[Way]

olamedia .: не, на php это для любителей пыхи я оставил. Пусть будет, чтобы вопрос не возникало.

[Way]

Вопросов*

[Way]

olamedia .: кстати, вот ещё такой вопрос, а можно присобачить скрипт к body? В прошлом скрипте это было так:

[olamedia .]

примерно так:
document.addEventListener("DOMContentLoaded", function() {
// кроме IE8, кроссбраузерные решения есть, можно найти легко
});

[Way]

olamedia .: хм, код почему то не вывелся, вот: body class="<? echo $vremya ?>"

[olamedia .]

Юрий Андрианов: в head пишется script в котором навешивается обработчик DOMContentLoaded, либо можно в самый конец добавить script

[Way]

olamedia .: а скрипт точно обновляет фон без перезагрузки страницы? А то после перезагрузки страницы только изменения произошли.

Answer 3

[FanatPHP]

Без перезагрузки - это яваскрипт

Comments

[Way]

Ну естественно. Я просто показал код который у меня есть(Если кому то нужен PHP скрипт), а мне нужен на JS.

[President42]

Юрий Андрианов: PHP для этого вообще не нужен