Получить профессию в Skypro
Создаем таймер обратного отсчета на JS и HTML без CSS
Быстрый ответ
<p id="countdown">10</p> <!-- Отобразится обратный отсчёт -->
<script>
let time = 10; // Задаём начальное время
const timer = setInterval(() => {
document.getElementById('countdown').textContent = time <= 0
? clearInterval(timer) // Останавливаем таймер, поскольку время истекло
: time--; // С каждой секундой уменьшаем время
}, 1000); // Интервал делаем одной секунды
</script>Этот код с использованием чистого HTML и JavaScript позволит вам добавить на ваш сайт 10-секундный обратный таймер. Функция setInterval регулярно обновляет число, отображаемое в элементе <p>, и останавливается, когда таймер достигает нуля.
Тиканье таймера: разбираем setInterval
Ключевой блок кода здесь — это функция setInterval(). Она вызывает указанную callback-функцию каждые 1000 миллисекунд, что обеспечивает нам отсчёт времени с равномерным интервалом.
Подробнее:
- Переменная
timeуменьшается на единицу, пока значение не станет равным нулю. - Для обновления содержимого на странице используется
document.getElementById(). - Если
timeравно нулю, тоclearInterval()останавливает таймер.
Заданный интервал в 1000 миллисекунд позволяет отсчитывать время по секундам и всё, что необходимо для работы – это JavaScript и HTML.
Отличительные особенности таймера
Добавляем сообщение после окончания отсчёта
Для добавления информации после окончания отсчёта, внесём незначительные изменения в код:
<p id="countdown">Загрузка начнётся через 10 секунд.</p> <!-- Отсчёт уже идёт -->
<script>
let time = 10; // Задаём время обратного отсчёта
const timer = setInterval(() => {
const countdownElement = document.getElementById('countdown'); // Последим за элементом отсчёта
if(time > 0) {
countdownElement.textContent = `Загрузка начнётся через ${time--} секунд.`;
} else {
clearInterval(timer); // Заканчиваем работу таймера
countdownElement.textContent = 'Идёт загрузка...'; // Сообщение о старте загрузки
}
}, 1000);
</script>
Обратный отсчёт с визуальным заполнением
Альтернативный вариант может представлять собой обратный отсчёт с визуальным индикатором:
<progress id="countdown" value="10" max="10"></progress> <!-- Прогресс заполнения -->
<script>
let time = 10; // Начинаем с 10
const timer = setInterval(() => {
const countdownElement = document.getElementById('countdown'); // Наблюдаем за полосой прогресса
if(time >= 0) {
countdownElement.value = time--; // Заполняем полосу прогресса
} else {
clearInterval(timer); // Полностью останавливаем таймер
countdownElement.textContent = 'Отсчёт завершён!'; // Сообщение о завершении
}
}, 1000);
</script>Использование элемента <progress> добавляет визуальный аспект к нашему таймеру, исключая необходимость ручной стилизации.
Визуализация
Представьте себе этот 10-секундный таймер как тикающие часы:
🕝...🕒...🕞...🕓...🕟...🕔...🕠...🕕...🕡...🕖... 🚀 Стартуем!Каждый тик здесь вызывает удар барабана в марше обратного отсчёта:
<!-- Отсчёт времени -->
<p id="timer">10</p>
<script>
// Время исчисляется секундами
setInterval(function() {
if(countdown > 0) {
document.getElementById('timer').textContent = --countdown;
// Каждый тик уменьшает время
}
}, 1000); // Отсчёт продолжается непрерывно
</script>Мы готовы к старту когда время отсчёта подойдёт к нулю!
Дополнительные возможности обратного отсчёта
Запуск по клику пользователя
Возможность взаимодействия пользователя, например, клик по кнопке, делает процесс запуска отсчёта более интерактивным:
<button id="startBtn">Запустить загрузку</button>
<p id="countdown">Готовы к старту!</p>
<script>
document.getElementById('startBtn').onclick = function() {
let time = 10; // Начало отсчёта
document.getElementById('countdown').textContent = 'Начало через 10 секунд.';
const timer = setInterval(() => {
const countdownElement = document.getElementById('countdown');
if(time > 0) {
countdownElement.textContent = `Начало через ${time--} секунд.`;
} else {
clearInterval(timer); // Остановка ожидания
countdownElement.textContent = 'Началась загрузка!'; // Сообщаем пользователю об этом
}
}, 1000);
};
</script>Многократные таймеры с настраиваемыми элементами
Настраиваемые элементы дают возможность использовать таймер для различных задач в интернете:
<download-timer></download-timer>
<script>
class DownloadTimer extends HTMLElement {
connectedCallback() {
this.innerHTML = `<p id="countdown">10</p>`;
this.startCountdown();
}
startCountdown() {
let time = 10; // Стартуем отсчёт
const timer = setInterval(() => {
this.querySelector('#countdown').textContent = time--; // Время уменьшается
if(time < 0) {
clearInterval(timer); // Остановка обязательна
this.textContent = 'Загрузка завершена!'; // Сообщаем о готовности
}
}, 1000);
}
}
customElements.define('download-timer', DownloadTimer); // Регистрируем новый элемент 'download-timer'
</script>Этот подход на основе компонентов включает логику обратного отсчёта в настраиваемый HTML-элемент. Таким образом, мы достигаем переиспользования кода и упрощения поддержки.
Полезные материалы
- JavaScript Timing Events — Изучите все различные способы работы с таймерами в JavaScript.
- setInterval() global function – Web APIs | MDN — Исчерпывающий ресурс с информацией о использовании
setIntervalдля установления интервалов и таймеров. - How to write a countdown timer in JavaScript? – Stack Overflow — Получите советы и рекомендации от коллег-программистов, научитесь на практических примерах и ошибках.
- Build a Countdown Timer in Just 18 Lines of JavaScript — SitePoint — Самый простой способ создать обратный отсчёт с помощью чистого JavaScript.
- The progress element | HTML5 Doctor — Руководство по использованию элемента
<progress>в HTML5. - onclick Event — Знакомство с использованием событий
onclickдля вызова функций JavaScript. - Using custom elements – Web APIs | MDN — Узнайте, как создавать и использовать настроиваемые элементы при веб-разработке.