Постановка задачи

Часто в работе возникает потребность жестко выдерживать тайминг при заслушивании серии докладов: при защите проектов, программ развития, дипломных работ и прочее. Если в повестке дня какого-либо мероприятия 10+ докладчиков, то без строгого соблюдения регламента невозможно не выбиться из графика. Как правило, это приводит к тому, что запланированное время мероприятия увеличивается кратно. А докладчикам, выступающим последними, фактически не достаётся должного внимания.

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

«Техзадание» выглядело следующим образом.

Перед запуском у пользователя имеется возможность задать три параметра:

1. Время доклада (по умолчанию 5 минут);

2. Время ответов на вопросы (по умолчанию 7 минут);

3. Время обсуждения (по умолчанию 3 минуты).

В системе имеются кнопки «Старт», «Пауза», «Стоп», «Далее».

При нажатии кнопки «Старт» начинается обратный отсчет от «времени доклада». Цифры очень крупные, на весь экран, зеленого цвета. По окончании этого времени автоматически запускается обратный отсчет «времени ответа на вопросы». При этом цифры становятся желтого цвета. По окончании этого этапа автоматически запускается обратный отчет от заданного «времени обсуждения» (красным цветом).

При нажатии кнопки «Пауза» на любом этапе отсчет просто останавливается и продолжается при повторном нажатии кнопки «Старт»/ «Продолжить». При нажатии кнопки «Стоп» весь отсчет сбрасывается на заданное время. При нажатии кнопки «Далее» происходит переход на следующую фазу отсчета (во время отсчета времени обсуждения кнопка «Далее» не активна).

Описание решения

Реализовал решение на связке HTML + JavaScript.

Ввел три состояния таймера:

 // Состояние таймера
        let timer = null;
        let isRunning = false;
        let isPaused = false;
        let currentPhase = 0; // 0 - доклад, 1 - вопросы, 2 - обсуждение
        let timeLeft = 0; // В секундах
        
        // Цвета и названия фаз
        const phases = [
            { name: 'Доклад', className: 'presentation' },
            { name: 'Ответы на вопросы', className: 'questions' },
            { name: 'Обсуждение', className: 'discussion' }
        ];

Обновление отображения времени реализовано следующим образом:

  // Обновление отображения
        function updateDisplay() {
            const minutes = Math.floor(timeLeft / 60);
            const seconds = timeLeft % 60;
            timeDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            
            phaseLabel.textContent = phases[currentPhase].name;
            
            timeDisplay.classList.remove('presentation', 'questions', 'discussion');
            phaseLabel.classList.remove('presentation', 'questions', 'discussion');
            
            timeDisplay.classList.add(phases[currentPhase].className);
            phaseLabel.classList.add(phases[currentPhase].className);
        }

Результат

Перед запуском отсчета пользователю предлагается настроить время каждой фазы.

В процессе работы отображается оставшееся время, название фазы, статус отсчета:

Кнопка "Далее" служит для оперативного переключения между фазами. Модератору становится сильно проще переключаться между этапами, а всем участникам мероприятия понятно, что происходит в конкретный момент.

Последнюю фазу "обсуждение доклада" сделал опциональной. Не всегда на мероприятиях комиссия обсуждает доклад сразу по его окончанию. Зачастую это происходит наедине, без присутствия участников.

Ознакомиться с работой таймера можно по ссылке

Полный репозиторий кода