Можно ли добавить класс к элементу когда наступит нужная дата используя java script?

Рейтинг: 0Ответов: 1Опубликовано: 05.06.2023

Можно ли как-то получить системную дату и в назначенную дату (допустим перед новым годом 31.12.2023) добавить класс к элементу?

document.getElementById('container').classList.add('newyear');
javascript
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Простая демонстрация как это можно сделать на стороне клиента. В моём примере много кода, потому что я пытался его сделать максимально интерактивным. В вашем же случае будет конкретно установленная дата и время, а потому код будет гораздо меньше

Основная логика в том, чтобы на стороне клиента запустить таймер, который будет отрабатывать каждую секунду и проверять нынешнее время равно времени что нам нужно? Если да, то добавляем класс и больше не вызываем таймер. Если нет, то вызываем таймер:

const datetimeEl = document.querySelector('input');
const div = document.querySelector('.div');

const getDatetimeWithoutMilliseconds = date => {
  const currentDatetime = date.toISOString();
  const currentDatetimeParts = currentDatetime.split(':');

  return currentDatetimeParts[0] + ':' + currentDatetimeParts[1];
}

const date = new Date();
date.setMinutes(date.getMinutes() + 1);

datetimeEl.value = getDatetimeWithoutMilliseconds(date);

console.log('Time is set to:', datetimeEl.value);

const checkTime = () => {
  const now = getDatetimeWithoutMilliseconds(new Date());
  const limit = datetimeEl.value;
  
  if (now === limit) div.classList.add('activated');
  else setTimeout(checkTime, 1000);
}

datetimeEl.addEventListener('change', () => {
  console.clear();
  console.log('Time is set to:', datetimeEl.value);
  div.classList.remove('activated');
  checkTime();
});

checkTime();
.div {
  width: 100px;
  height: 100px;
  background-color: red;
}

.div.activated {
  background-color: green;
}
Set time:

<input type="datetime-local" />

<div class="div">Color will change</div>