Как скриптом определять время и в зависимости от этого удалять класс?

Question

[Vladislav]

Как скриптом определять какое сейчас время и в зависимости от этого удалять класс у элемента?

Answer 1

[Egor Sabyanin]

Вам понадобится setInterval, объект Date и element.classList.remove('yourClass');

<div class="night">
   Какой-то текст
</div>

div {
   color: #000;
   background: #fff;
   }
   
   .night {
     padding: 15px;
     color: #fff;
     background: #000;
  }

let element = document.querySelector('div');


 setInterval(() => {
      if(new Date().getHours() < 22) {
         element.classList.remove('night');
       } 
    }
, 1000);

Если текущее время меньше 22 часов, то удаляется класс night, проверка времени происходит каждую секунду.

Comments

[Vladislav]

Egor Sabyanin ну вот смотрите реальный пример, сейчас 10:24, а удаляется только у 00, надо чтобы удалялся до 10 часов, ну это в данный момент когда я пишу, а так удалялся до того часа у юзера, который сейчас у него, например у него 22:01, а удаляется от 00 до 22 включительно и доступно только 23, вот песочница с реальным примером
https://codepen.io/vladgr/pen/dyXBQYP

А если через массив и цикл прогнать, то удаляется вообще у всех

let element = document.querySelectorAll('.day');

        for (let i = 0; i < element.length; i++) {
            
            setInterval(() => {
                if(new Date().getHours() < 22) {
                    element[i].classList.remove('night');
                } 
            }
            , 1000);
        }

[Egor Sabyanin]

Vladislav, Вы скинули ссылку на проект, где у li есть текст 00, 01, 02...23, то есть вам нужно именно li скрывать (или удалять запись?) в зависимости от времени пользователя?

Если именно этого хотите, то вот JavaScript, который должен быть в вашем проекте

JavaScript

let element = document.querySelectorAll('.day');
let li = document.querySelectorAll('li');

        for (let i = 0; i < element.length; i++) {
            setInterval(() => {
                if(parseInt(li[i].textContent, 10) <= new Date().getHours()) {
                    element[i].classList.remove('night');
                } 
            }
            , 1000);
        }

[Vladislav]

Egor Sabyanin, просто будет меняться цвет у li, например черный у времени которое еще не настало и серый время которое уже у юзера прошло

[Egor Sabyanin]

Vladislav, Значит решение удовлетворяет требованию :)

[Vladislav]

Egor Sabyanin, дак первый вариант то, что вы скинули он для одного элемента, а тут получается массивоподобный элемент querySelectorAll('.day') и надо удалять класс, а он удалятся либо у одного либо увсех сразу, хотя на часах у меня 11:09

[Egor Sabyanin]

Vladislav, Сейчас у меня 13:10 и удаляется класс до 13:00 включительно.

https://codepen.io/egorsabyanin/pen/rNLEQwR

[Vladislav]

Egor Sabyanin, а подскажите пожалуйста, что он тут в условие делает? с остальным все понятно

if(parseInt(li[i].textContent, 10) <= new Date().getHours()) {
                  
                }

и почему 10?

[Egor Sabyanin]

В условии сравнивается текущее время с текстом, который лежит в теге li, но так как текст является строкой, её следует преобразовать к числовому формату, а функция parseInt() и совершает необходимое преобразование, первый аргумент это то, что нужно преобразовать, второй аргумент система счисления)

[Vladislav]

Egor Sabyanin, у меня 11:25 и так же удаляется с 00 но уже по моему времени до 11 включительно

[Vladislav]

Egor Sabyanin, 10 это система счисления? это как? в смысле?)

[Egor Sabyanin]

Разве так не должно быть?

У вас 11:25, то есть класс удаляется от 00 до 11 включительно

[Egor Sabyanin]

Vladislav, Почитайте в официальной документации parseInt(), если не поймете погуглите, что такое система счисления и какие они бывают.

[Vladislav]

Egor Sabyanin, если прописать так

if(parseInt(li[i].textContent, 10) <= new Date().getHours()) {
                    element[i].classList.remove('night');
                }

то будет так
если так

if(parseInt(li[i].textContent, 2) <= new Date().getHours()) {
                    element[i].classList.remove('night');
                }

то время так а если так то

if(parseInt(li[i].textContent, 22) <= new Date().getHours()) {
                    element[i].classList.remove('night');
                }

то вообще вот так а время то идет и не стоит на месте, не совсем до конца вы мне помогли, прошу помогите пожалуйста

[Egor Sabyanin]

Vladislav, Вы тролите?))) Зачем вы вместо 10-ой системы счисления делаете 2-ую и 22-ую? Оставьте 10-ую и всё будет работать нормально.

[Vladislav]

Egor Sabyanin, а ну да, я так понимаю это часовые пояса, не?

[Vladislav]

Egor Sabyanin, а все, почитал, а еще можете подсказать как показывать время по мск? это последний вопрос к вам