Этот вопрос закрыт для ответов, так как повторяет вопрос Как сделать прогресс-бар по реальному времени?
@makssshow

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

5f4ea08a40b38729200242.png
<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);

тоже не был привязан к одной константе.
  • Вопрос задан
  • 134 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.
Похожие вопросы