Как сделать массивы с временем?

Question

[makssshow]

<table class="col-lg-5 timetable">
                    <caption>Для &#8545;-&#8547; курсов</caption>
                    <caption>Четверг</caption>
                    <tr>
                        <th>Пара</th>
                        <th>Время</th>
                        <th>Перемена</th>
                    </tr>
                    <tr>
                        <td class="activeOne">1</td>
                        <td id="first"></td>
                        <td>10 минут</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>10:10 - 11:40</td>
                        <td>30 минут</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>12:10 - 13:40</td>
                        <td>10 минут</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>13:50 - 15:20</td>
                        <td>10 минут</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>15:30 - 17:00</td>
                        <td>10 минут</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>17:10 - 18:40</td>
                        <td></td>
                    </tr>
                </table>

.timetable td {
    --progress: 0%;
    border: 1px solid #000;
}
.activeOne{
    background-color: #ff8200;
}
.TimeProg {
    background-color: #ff8200;
    width: var(--progress);
    height: 6px;
}

document.addEventListener("DOMContentLoaded", () => {
            const container = document.getElementById("first");
            const currentTimeStamp = new Date();
            const fT = new Date(currentTimeStamp.setHours(20, 00));
            const sT = new Date(currentTimeStamp.setHours(22, 2));

            const formatTime = date => {
                let hours = date.getHours();
                let minutes = date.getMinutes();

                if (hours < 10) hours = "0" + hours;
                if (minutes < 10) minutes = "0" + minutes;

                return `${hours}:${minutes}`;
            };
            container.innerHTML = `${formatTime(fT)} - ${formatTime(sT)} <div class="TimeProg"></div>`;
            const ticker = () => {
                const totalOfRange = (+sT - +fT) / 60000;
                const minutesPassed = (Date.now() - +fT) / 60000;
                const progress = minutesPassed / (totalOfRange / 100);

                container.style.setProperty("--progress", progress + "%");
            };

            ticker();
            setInterval(ticker, 1000);
        });

Мне нужно, чтобы в определенный промежуток времени, который создается через js (Это не обязательно, сейчас такой скрипт написал) давался активный класс столбцу "пары" и появлялся <div class="TimeProg"></div> у (в примере) #first.
И по окончанию времени убирался. Но самое сложное, и основная задача - сделать массивы, с таким кол-вом промежутков, и чтобы

const totalOfRange = (+sT - +fT) / 60000;
                const minutesPassed = (Date.now() - +fT) / 60000;
                const progress = minutesPassed / (totalOfRange / 100);

тоже не был привязан к одной константе.

Comments

[Somewhere Intech]

У Вас реализация сложнее поставленной задачи, как мне кажется

[makssshow]

Johnny Lowhunter, Этот скрипт тоже собран из разных частей и подкорректирован. Я его не с нуля писал.

[good_beginer]

как на счёт

setInterval(function() {
if (currentTime = 22:00) {
   document.getElementByID("first").innerHTML = '<div class="TimeProg"></div>';
}
}, 60000);

Каждую минуту проверяется какое сейчас время и если проходит иф то делаются изменения

[Сергей Сергей]

Здесь можно время хранить в минутах, так как позволяет точность записи расписания. Преобразования к отображению часов в таблице или миллисекунд для таймеров делаются простой арифметикой. Ну и отсчёт минут начинать по началу учебного дня, или суток, как удобней в общем.
Затем составлять массив записей с началом и концом в минутах для каждой учебной пары. А при загрузке страницы пройтись по этому массиву и выставить таймеры setTimeout для стилизации соответствующей строки таблицы. Таймер по началу для задания стиля, таймер по окончанию для удаления стиля. Естественно, таймеры для моментов, которые уже как бы прошли по времени дня, не выставлять, а провести проверку, какая пара длится и стилизовать её.
Зацикливать в интервал проверку времени не имеет смысла, ведь время фиксировано, что делать в указанные моменты известно.