Я создал этот таймер с помощью следующего кода, он работает локально, но у меня возникли трудности с его интеграцией на мой форум. Кто-нибудь, пожалуйста, помогите?
<!-- HTML (Добавьте это в раздел Header) -->
<style>
button {
padding: 5px;
margin: 2px;
cursor: pointer;
border: none;
color: white;
width: 100px; /* Установите желаемую ширину для всех кнопок */
border-radius: 5px;
}
#readTaskButton {
background: #008000; /* Более тёмный зелёный для лучшей видимости на тёмном фоне */
}
#enterRoomButton {
background: #DAA520; /* Более тёмный жёлтый */
}
#pauseButton {
background: #A0522D; /* Более тёмный оранжевый */
}
#stopButton {
background: #FF0000; /* Более тёмный красный */
}
</style>
<div style="display: flex; align-items: center; justify-content: center;">
<div style="display: flex; flex-direction: column; align-items: center; margin-right: 20px;">
<button id="readTaskButton" onclick="startTimer(90)">Прочитать задание</button>
<button id="enterRoomButton" onclick="startTimer(480)">Войти в комнату</button>
</div>
<div id="timer" style="font-size: 2em; text-align: center; margin: 0 20px;" onclick="togglePauseResume()">00:00</div>
<div style="display: flex; flex-direction: column; align-items: center; margin-left: 20px;">
<button id="pauseButton" onclick="togglePauseResume()">Пауза</button>
<button id="stopButton" onclick="stopTimer()">Стоп</button>
</div>
</div>
<!-- JavaScript (Добавьте это в раздел Footer) -->
<script>
let timer;
let totalSeconds;
let isShortTimer = true;
let isPaused = false;
function startTimer(duration) {
resetTimer();
totalSeconds = duration;
timer = setInterval(updateTimer, 1000);
}
function togglePauseResume() {
if (isPaused) {
resumeTimer();
} else {
pauseTimer();
}
updateButtonLabel();
}
function updateButtonLabel() {
const button = document.getElementById('pauseButton');
button.innerText = isPaused ? 'Продолжить' : 'Пауза';
}
function pauseTimer() {
clearInterval(timer);
isPaused = true;
}
function resumeTimer() {
isPaused = false;
timer = setInterval(updateTimer, 1000);
}
function stopTimer() {
resetTimer();
updateButtonLabel();
}
function updateTimer() {
if (totalSeconds <= 0) {
if (isShortTimer) {
isShortTimer = false;
startTimer(480); // Автоматически запустить более длинный таймер после начального
} else {
isShortTimer = true;
startTimer(90); // Автоматически запустить начальный таймер после более длинного
}
}
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
const formattedTime = `${formatTime(minutes)}:${formatTime(seconds)}`;
document.getElementById('timer').innerText = formattedTime;
totalSeconds--;
}
function formatTime(time) {
return time < 10 ? '0' + time : time;
}
function resetTimer() {
clearInterval(timer);
document.getElementById('timer').innerText = '00:00';
}
</script>
Чтобы это работало, нужно вставить JS в Head!
Также будьте осторожны с CSS для button — лучше создать специфичный селектор, чтобы не перезаписать стили по умолчанию.
В идеале стоит создать компонент темы и использовать outlet для обработки HTML и логики. Я могу показать это позже!
Я попробовал. Я создал новый компонент темы и с помощью опции «Редактировать CSS/HTML» вставил этот код в раздел common > header. Я вижу таймер на сайте, но проблема в том, что таймер не работает. У него есть кнопки «Воспроизвести» и «Остановить», локально всё работает отлично, но на сайте отображается только таймер без функционала.
Кстати, вот компонент темы, использующий ваш код: https://github.com/Arkshine/discourse-timer-component.
Не стесняйтесь форкнуть его и установить на свой Discourse.
Надеюсь, мой код не слишком ужасен, но это был бы предпочтительный способ в отличие от добавления простого JavaScript в данном контексте.
Он должен работать так же, с дополнительными функциями реактивности, настройками и локализацией.
Это может показаться сложным, но это отличная возможность погрузиться в разработку компонентов темы! Не стесняйтесь спрашивать, если что-то непонятно.
Настоятельно рекомендую использовать Discourse Theme CLI, если вы хотите работать с ним локально. Это очень удобно!
Это непрерывный таймер: сначала он запускается на 1:30, затем переходит на 8:00 минут, затем снова на 1:30 и так далее, никогда не завершаясь.
Когда таймер работает, пользователи должны иметь возможность перейти напрямую к 8:00 минутам, нажав кнопку «Войти в комнату», или переключиться на таймер 1:30, нажав «Читать задачу». Следовательно, отключение кнопок «Пауза» и «Стоп», когда таймер не работает, имеет смысл, но отключение кнопок «Читать задачу» и «Войти в комнату» во время работы таймера лишит пользователей возможности пропустить таймер.
Будущие изменения:
Добавление голосового сообщения в начале таймера 1:30, в начале таймера 8:00 минут, при оставшихся 2:00 минутах таймера 8:00 минут и, наконец, в конце таймера 8:00 минут (что по сути является началом таймера 1:30). Всего три голосовых сообщения.
Добавление всплывающего уведомления для каждого голосового сообщения, которое появляется и исчезает, не занимая весь экран, а отображаясь в области, где расположен таймер.
Бессмысленно позволять нажимать на кнопки паузы/остановки, если таймер ещё не запущен. То же самое касается отображения «пауза» или «возобновить», поэтому получается, что в режиме ожидания у вас активный таймер. На самом деле я бы скрыл эту кнопку. Но, думаю, использовать метку «пауза» по умолчанию — это нормально.
Он чередуется между ними, понятно. Я думал, это цикл с одним из этих таймеров.
Не совсем понимаю контекст, это выглядит довольно странно, но я могу это исправить.
Для меня невероятно видеть, как этот таймер оживает. Ты потрясающий и вдохновляющий человек.
Это таймер для экзамена, который проводят врачи. Я тоже врач и пытаюсь помочь другим врачам.
Экзамен состоит из 16 комнат, в каждой из которых находится один из 16 разных пациентов, которых нам нужно диагностировать и лечить. Перед входом в любую комнату снаружи находится задание, которое можно прочитать за 1 минуту 30 секунд, после чего вы входите в комнату. У вас есть 8 минут, чтобы выполнить задание и справиться с пациентом. Этот цикл повторяется для всех 16 комнат. В общей сложности на прохождение экзамена уходит 3 часа.
К сожалению, я не сдал этот экзамен из-за недостоверной информации и ошибочных рекомендаций, связанных с ним, что и вдохновило меня создать этот форум, чтобы помочь другим врачам.
Я выкатил обновление. Теперь он должен циклически переключаться между коротким и длинным таймером, и вы можете переключаться на любой таймер. Я также убрал использование «ожидание..». Дайте знать, если стало работать лучше.
Спасибо за объяснение контекста, теперь я понимаю!
Я обнаружил ошибку: при нажатии на кнопку «Читать задачу» таймер переключается с 1:30 на 8:00, а затем зацикливается на 1:30. При нажатии на кнопку «Войти в комнату» таймер переключается с 8:00 на 1:30, а затем зацикливается на 8:00.
Вы уверены, что обновили и перезагрузили страницу? Вы описываете ошибку до исправления, и сейчас я не могу её воспроизвести. Я снова протестировал, и цикл работает, как и ожидалось.
