Переключение классов по времени?

Question

[ValentinHabr]

На сайте имеются 2 лэйбла со временем. Нужно определить текущее время и в зависимости от того который час присваивать активный класс лэйблу

<div class="session" id="session1"><span>10:00 - 11:30</span></div>
<div class="session" id="session2"><span>11:30 - 13:00</span></div>

Я пробовал через объект Date получить текущее время, вынуть часы и минуты. Но я не понимаю как прописать условия, ниже приведенный код не работает

let time = new Date();
    let hours = time.getHours();
    let minutes = time.getMinutes();

if(hours > 10 && (hours < 11 && minutes < 30)){
        session1.classList.add('active_session');
        session2.classList.remove('active_session');
    }else if((hours > 11 && minutes > 30) && hours < 13){
        session1.classList.remove('active_session');
        session2.classList.add('active_session');
    }

Comments

[Froggyweb]

решение в лоб - норм, но завтра вариации времени будут 15 мин., послезавтра - 5, А потом для американцев с PM/AM

Answer 1

[Дмитрий Беляев]

if (hours === 10 || (hours === 11 && minutes < 30)) {
  // 1
} else if ((hours === 11 && minutes >= 30) || hours === 12) {
  // 2
}

Но проще вычислить даты для контрольных точек и сравнивать текущее время с ними:

function createDate(hours, minutes) {
  const d = new Date();
  d.setHours(hours);
  d.setMinutes(minutes);
  return d;
}

const time1 = createDate(10, 0).getTime();
const time2 = createDate(11, 30).getTime();
const time3 = createDate(13, 0).getTime();
const now = Date.now();
if (now >= time1 && now < time2) {
  // 1
} else if (now >= time2 && now < time3) {
  // 2
}

Ну и так же стоит учитывать, что считать это все будет в часовом поясе пользователя, если же нужны вычисления независимые от часового пояса, то стоит использовать методы setUTCHours и setUTCMinutes со смещениями нужного часового пользователя относительно UTC (Лондона) ну или getUTCHours/getUTCMinutes для первого варианта.