@YouTy6bl4

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

Как сделать смену фона по времени суток без перезагрузки страницы? С примером!
У меня есть такой код:
<?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;
}
  • Вопрос задан
  • 905 просмотров
Решения вопроса 2
@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');
    }
}
Ответ написан
w999d
@w999d
Web-developer
var check = function(){
  // здесь проверка и смена фона
};
setInterval(check, 60000); // выполняется раз в минуту, чтобы не слишком нагружать
check(); // выполнить один раз сразу, если фон накладывается только яваскриптом
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
FanatPHP
@FanatPHP
Чебуратор тега РНР
Без перезагрузки - это яваскрипт
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы