Как сделать чтобы стиль, цвет background менялся в зависимости от дня и ночи?

Question

Как сделать так, чтобы с 6 утра до 12 часов стиль класса bg был одним, с 12:01 до 19:00 другим, а в 19:01 был третьим. При этом с 6-19 использовался такой тип кода цвета (#ffffff), а c 19 такой (radial-gradient(#1f64ff, transparent)) ? Спасибо

Answer 1

const div = document.querySelector('div')

// Получить текущее время
const currentTime = new Date()

// Для примера добавим переключение через 3 сек
// На деле просто устанавливаются часы
const targetTime = new Date()
targetTime.setSeconds(currentTime.getSeconds() + 3)

// Вычислить разницу между currentTime и targetTime
const diff = targetTime.valueOf() - currentTime.valueOf()

// Запустить перестановку класса в необходимое время
setTimeout(() => {
  div.classList.remove('day')
  div.classList.add('night')
}, diff)

// ... Осталось написать нужный код

div {
  padding: 1em;
  font-size: 36px;
}

.day {
  background-color: #9e9e9e40;
  color: black;
}

.night {
  background-color: #9e9e9e;
  color: white;
}

<div class="day">Фон</div>

БЛОГ НА HUSL

Как сделать чтобы стиль, цвет background менялся в зависимости от дня и ночи?

Ответы (1 шт):