Как сделать прогресс-бар по реальному времени?

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>8:30 - 10:00<div class="TimeProg"></div></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 {
    text-align: center;
}
.timetable tbody tr:nth-child(even) {
    background-color: #e6e6e6;
}
.timetable th {
    border: 1px solid #000;
}
.timetable td {
    border: 1px solid #000;
}
.timetable caption {
    caption-side: top;
    text-align: center;
    color: #444;
    padding: 3px 0 10px 0;
}
.UnActive {
    background-color: unset !important;
}
.activeOne{
    background-color: #ff8200;
}

.TimeProg {
    background-color: #ff8200;
    width: 100%;
    height: 6px;
}

Привет! Мне нужно, чтобы в реальном времени, например по московскому, давался активный класс "паре" и по соответственному времени заполнялась полоса (увеличивался width до 100%), а на перемене соответственно полосу у перемены. Еще надо, чтобы день сверху писался скриптом и менялся каждый день, а в среду была уже чуть измененная таблица. Но мне главное придумать скрипт, который сможет зависить от времени (именно постоянно, без обновления страницы) и менять полосу. С остальным я разберусь. Спасибо!!

Answer 1

[Алексей Николаев]

Ну во-первых, тебе в любом случае придется подписаться на обновление таймера. Без вариантов. Поэтому первым делом определяешь обработчик для setInterval в 1-5 секунд.

Во-вторых, у тебя есть несколько временных интервалов. Их удобно определить массивами, где первое значение будет являться началом интервала, а второе - его концом.

const range = [Date.now(), Date.now() + 3600 + 12]; // типичный интервал

В-третьих, имея интервалы и обработчик, дело остается за малым. Каждый тик таймера проверяй, не входит ли текущее Date.now() в какой-либо из интервалов. Если входил, обновляй нужные данные, как-то: вешай нужный класс, рассчитывай процент "заполненности" интервала.

В принципе, это все. Алгоритм расписал, дело за реализацией. Удачи.

Comments

[makssshow]

Спасибо, но я не настолько хорошо знаю js, а в интернете инфы очень мало. С датами и как их получить я разобрался, но что значит

const range = [Date.now(), Date.now() + 3600 + 12]; // типичный интервал

+ 3600 + 12

? Что именно вы прибавляете, и что за "12"? А как должен выглядеть обработчик, чтобы проверять совпадения?