TGViewer
Логово верстальщика Логово верстальщика @webdevlair · 7.93K subscribers
Post #3898 917
👩‍💻 Таймер обратного отсчёта

Создайте простую страницу с таймером обратного отсчёта. Пользователь вводит количество секунд, нажимает кнопку "Старт", и таймер начинает обратный отсчёт до нуля. После окончания таймера на экране отображается сообщение "Время вышло!".

Решение задачи🔽

<input type="number" id="timeInput" placeholder="Введите секунды">
<button id="startButton">Старт</button>
<div id="timer">0</div>

const input = document.getElementById('timeInput');
const button = document.getElementById('startButton');
const timerDisplay = document.getElementById('timer');
let timerId;

button.addEventListener('click', () => {
const seconds = parseInt(input.value, 10);
if (isNaN(seconds) || seconds <= 0) {
timerDisplay.textContent = 'Введите корректное число!';
return;
}

clearInterval(timerId);
let remainingTime = seconds;

timerDisplay.textContent = remainingTime;
timerId = setInterval(() => {
remainingTime -= 1;
if (remainingTime <= 0) {
clearInterval(timerId);
timerDisplay.textContent = 'Время вышло!';
} else {
timerDisplay.textContent = remainingTime;
}
}, 1000);
});
  • 👍 4
More from @webdevlair
  1. Oct 7, 2026История HTML и CSS: какие элементы и свойства ушли навсегда Люди обожают копаться в прошло…
  2. Oct 7, 2026Post #4676
  3. Oct 7, 2026Выпуск #805 (6 октября 2026) JavaScript Weekly открывается материалом Нолана Лоусона «Why…
  4. Oct 5, 2026Claude теперь работает под надзором — и это, как ни странно, к лучшему Anthropic выпустили…
  5. Oct 5, 2026Cache Control в Claude Code — мод для тех, кто устал смотреть, как токены утекают в никуда…
  6. Oct 5, 2026OpenAI устроила месяц подарков — 28 дней апдейтов и халявных ресетов лимитов Тибо из OpenA…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →