Как постоянно менять фоновое изображение / цвет в зависимости от текущего времени суток?
Я пытаюсь улучшить свой веб-сайт для проекта в моем колледже. Что именно я пытаюсь сделать, так это изменить фон в зависимости от времени. Представьте себе этот сценарий, когда цвет фона меняется на фоновое изображение с линейным градиентом в соответствии с определенным временем дня.
Пример: С 7:00 до 13:00 иметь такой фон: фон: linear-gradient (вниз, желтый 0%, красный 100%) С 13:00 до 18:00 иметь такой фон: фон: linear-gradient (вниз, # 003366 0%, # 000d1a 100%); А в остальном имейте этот фон: фон: linear-gradient (вниз, # 000d1a 0%, # 000000 100%);
Все, что у меня есть до сих пор, что могло бы помочь мне найти способ сделать это в HTML с помощью JavaScript, это следующее:
On HTML:
<script type=”text/javascript” src=”script.js”> </script>
var date=new Date();
var hour=data.getHours();
if (hour<13)
{
alert("Good Morning!");
}
else if (hour<18)
{
alert("Good Evening!");
}
else
{
alert("Good Night!");
}
(Использовал команду «предупреждение» в качестве примера того, что я мог бы в ней уместить, чтобы изменить фон, то есть команду, которую я сейчас ищу)
Я хотел бы извиниться за неправильную грамматику или каталог, или за что-то еще, что я сделал не так. Не стесняйтесь поправлять меня во всем.
Если бы кто-нибудь мог дать мне пример простого синтаксиса HTML в html с кодом javascript внутри него, а не в другом каталоге, это действительно помогло бы! В любом случае, спасибо, что нашли время помочь мне! = D
Если все пойдет так, как ожидалось, я опубликую здесь свой веб-сайт, чтобы поделиться со всеми, думаю, было бы хорошо, если бы люди увидели проекты друг друга. В проекте, над которым я сейчас работаю, я отвечаю за разработку веб-сайта, который покажет пользователю плюсы и минусы использования фотоэлектрической пластины в домашних условиях / на территории компании, а также с использованием устройства солнечного слежения. в теме. На веб-сайте мы собираемся получить результаты по всему, что с этим связано, я обязательно переведу их с португальского на английский. Хорошего дня.
заменить alert на document.body.style.background = '<your favorite color here>';
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете использовать тайм-аут, чтобы проверить текущее время.
function VerifyTime(){
var hour=new Date().getHours();
if (hour<13)
{
alert("Good Morning!");
}
else if (hour<18)
{
alert("Good Evening!");
}
else
{
alert("Good Night!");
}
}
window.setTiemout(function(){VerifyTime()},<time>})
время выражается в миллисекундах: 1 секунда = 1000, я предлагаю вам проверять каждую минуту с 60000 или каждую секунду с 1000
Просто используйте классы CSS для отображения нужного фона:
<style>
.morning{
background: morningColor;
}
.evening{
background: eveningColor;
}
.night{
background: nightColor;
}
</style>
Затем замените свое предупреждение, добавив соответствующий класс:
<script>
var hour=new Date().getHours(); // get current hour value
var elem = document.body.getElementById(<your element id>); // you can trigger a specific element via id for example
if (hour<13){
elem.className += 'morning';
}
else if (hour<18){
elem.className += 'evening';
}
else{
elem.className += 'night';
}
</script>
Я думаю, это то, что вы хотите сделать:
var date = new Date();
var hour = date.getHours();
if (hour < 13) {
alert("Good Morning!");
document.body.classList.add('morning'); // Based on the current time, add a class to the document's body
} else if (hour < 18) {
alert("Good Evening!");
document.body.classList.add('evening');
} else {
alert("Good Night!");
document.body.classList.add('night');
}.morning {
background-color: lightblue;
}
.evening {
background-color: orange;
}
.night {
background-color: black;
}
/** These colours are just examples, style them in the way you need them to be */
Итак, вы не знаете, как использовать JS для изменения цвета фона элемента?