Как изменить цвет элемента CSS с помощью javascript на основе разницы между двумя датами?
У меня есть HTML-таблица, содержащая список сроков выполнения. Я бы хотел, чтобы цвет фона ячейки менялся в зависимости от разницы между датой выполнения и сегодняшней датой:
Черный - срок сдачи прошел
Красный - срок выполнения в течение 30 дней
Оранжевый - срок выполнения от 30 до 60 дней
Зеленый - срок сдачи более 60 дней
Из того, что я прочитал, я мог бы определить класс в CSS, использовать getElementsByClassName в javascript для изменения цвета, но как? А как вы рассчитываете разницу дат?
Что я уже пробовал:
Я не пробовал ничего стоящего упоминания, потому что не уверен, как действовать дальше, отсюда и вопрос.
F-ES Sitecore
Я бы создал классы с семантическими именами, поэтому один из них называется dueDatePassed, другой-dueWithinThirty и т. д., и прикрепите к ним нужные стили. Таким образом, если вы хотите изменить то, как они появляются позже, ваши имена классов все еще имеют смысл. Чтобы узнать, как добавлять\удалять классы из элементов, просто google "javascript add remove class", он хорошо документирован. Аналогично google "javascript compare dates", чтобы узнать, как это сделать.
Если бы это был я, я бы прикрепил атрибут данных к элементу "td", который содержал дату в известном формате или, возможно, тики, для более надежного преобразования в переменную даты
<td data-date="2020-06-26">26 июня 2020 года<td/>
W∴ Balboos, GHB
Может быть, вы ищете не в том месте.
Откуда берутся эти даты, которые заполняют ваш стол? Если это база данных, у вас есть возможность сделать это на стороне сервера.