Как сделать смену цвета по времени суток?

Question

[deadshumz]

Есть сайт. Если время на устройстве пользователя > 12 или < 8 То должна сработать функция. При этом если пользователь зашёл в 11:59 - по наступлению 12:00 - функция должна сработать, но этого не происходит.
P.S. Нужно чтоб он в реальном времени изменился ( не обновляя страницу )
Загрузил на хостинг: https://shumzzzz.github.io/
Код:

function theme() {
	let now = new Date();
	hours = now.getHours();
	if (hours > 12 || hours < 8) {
		let navbar = document.getElementById('navbar');
		navbar.classList.remove('navbar-light');
		navbar.classList.add('navbar-dark-bg');
		let nav = document.getElementById('nav');
		navbar.classList.remove('light');
		navbar.classList.add('dark');
		let collapseBtn = document.getElementById('navbar-toggler');
		collapseBtn.classList.remove('navbar-light');
		collapseBtn.classList.add('navbar-dark');
		document.body.style.backgroundColor = "gray";
	}
}
setInterval(theme, 1000)

Comments

[Andrey Vasilev]

По наступлению 12:00 Функция должна сработать

не должна

При этом если пользователь зашёл в 11:59

а если у пользака пояс часовой не такой же?

let now = new Date();
let hours = now.getHours();

В hourse лежит 18 по МСК, в условие всё попадает.

[Николай]

вы сравниваете больше или меньше, попробуйте поставить больше или равно (>=) 12, то скорее все получится

[WapSter]

Andrey Vasilev, а там не важно какой пояс, в браузере работает текущее время системы.

[Andrey Vasilev]

WapSter, текущее время системы от пояса разве не зависит?

[WapSter]

Andrey Vasilev, зависит, но этот код у тебя срабатывает как 18 часов у меня 21, ему пофиг на пояс) Я думаю у него либо css не прописан, или event loop чем то занят, что блокирует setInterval.
В ответах и Николай верно написали, он же проверят часы, и в его условии 12 не больше 12, а 8 не меньше 8. Кстати автор не любит своих пользователей раз каждую секунду запускает функцию, лучше сделай на событие загрузки страницы.

[Григорий]

1 - должно работать - у меня работает

function theme() {
    let now = new Date();
    let hours = now.getHours();
    if (hours > 12 || hours < 8) {
        console.log('dark')
    } else {
        console.log('light')
    }
}
setInterval(theme, 1000)

2 - объяви hours - "let hours"
3 - мне думается что лучше обновление сделать раз в минуту - чтобы не грузить прогонкой кода каждую секунду setInterval(theme, 1000*60)
4 - проверяй в console.log в браузере, что происходит - может какие-то ошибки, может не верно цепляешь DOM-элементы, может скрипт подключаешь до рендера DOM и т.д. - смотри консоль в браузере

[deadshumz]

Andrey Vasilev, now.getHours = Получение времени пользователя..

[Andrey Vasilev]

deadshumz, сверху уже сказали, что это системное время

Answer 1

[Антон]

if (hours >= 12 || hours <= 8) {}

Comments

[deadshumz]

Это понятно, но нужно чтоб он в реальном времени изменился ( не обновляя страницу)

[WapSter]

deadshumz, замени условие в своем коде на это и измениться тема. Но вопрос нафига так нагружать браузер и батарею ради поршивой смены темы. Я про setInterval каждую секунду.

[deadshumz]

WapSter, Можно каждые 5 минут, это не играет роли, Мне нужно чтоб оно изменялось в реальном времени

[Антон]

Ну, либо используйте setInterval , как писали ранее, либо используйте web sockets.