Часы обратного отсчета (countdown timers) – это полезный элемент для многих веб-сайтов. Они позволяют отображать оставшееся время до важных событий, таких как запуск продукта, акции, сроки предложений и многое другое. В этой статье мы рассмотрим, как создать часы обратного отсчета с использованием JavaScript, HTML и CSS.

Теория

Чтобы использовать часы обратного отсчета, созданные с использованием JavaScript, HTML и CSS на вашем веб-сайте, вам необходимо внедрить соответствующие коды и структуру в вашу веб-страницу. Вот шаги, как это сделать:

  1. Создайте HTML-страницу: создайте новую HTML-страницу или откройте существующую, на которой вы хотите разместить эту вещь.
  2. Добавьте необходимую HTML-структуру: вставьте HTML-код, который определен в предоставленной статье, внутрь тега <body> вашей веб-страницы. Этот код создает контейнер для отображения.
  3. Создайте CSS-стили: Добавьте CSS-стили, определенные в статье, в отдельный файл стилей (например, styles.css) и подключите его к вашей HTML-странице с помощью тега <link> в секции <head>.
  4. Создайте JavaScript-скрипт: вставьте JavaScript-код, также предоставленный в статье, внутрь тега <script> в секции <head> или перед закрывающимся тегом </body>. Этот код управляет таймером, рассчитывает оставшееся время и обновляет отображение дней, часов, минут и секунд.
  5. Настройте дату окончания: в коде JavaScript, найдите строку, в которой определена переменная countdownDate, и установите желаемую дату и время окончания. Например: new Date(‘2023-12-31 00:00:00’).
  6. Сохраните и разместите на сервере: сохраните измененную HTML-страницу, CSS-файл и JavaScript-файл на вашем веб-сервере.

Откройте веб-страницу в браузере: Откройте вашу веб-страницу в веб-браузере, и вы увидите часы обратного отсчета, отображающие оставшееся время до заданной даты.

ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
  • Где и как применять? Потестируем модель после установки на разных задачах
  • Как дообучить модель под себя?
Участвовать бесплатно

Приступаем к программированию

  • Подготовка HTML-структуры

Прежде чем мы начнем разрабатывать JavaScript-код для часов обратного отсчета, давайте создадим необходимую HTML-структуру. Вот пример базовой структуры:

«`html

<!DOCTYPE html>

<html lang=»en»>

<head>

<meta charset=»UTF-8″>

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

<link rel=»stylesheet» href=»styles.css»>

<title>Часы обратного отсчета</title>

</head>

<body>

<div class=»countdown»>

<div class=»countdown-item»>

<span id=»days»>00</span>

<p>Дни</p>

</div>

<div class=»countdown-item»>

<span id=»hours»>00</span>

<p>Часы</p>

</div>

<div class=»countdown-item»>

<span id=»minutes»>00</span>

<p>Минуты</p>

</div>

<div class=»countdown-item»>

<span id=»seconds»>00</span>

<p>Секунды</p>

</div>

</div>

</body>

</html>

«`

Этот код создает базовую HTML-страницу с контейнером для часов обратного отсчета и четырьмя элементами для отображения дней, часов, минут и секунд. Теперь давайте перейдем к CSS, чтобы стилизовать нашу страницу.

  • Стилизация с CSS

С помощью CSS можно придать нашим часам обратного отсчета привлекательный внешний вид. Вот пример стилей:

«`css

/* styles.css */

body {

font-family: Arial, sans-serif;

background-color: #f1f1f1;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

}

.countdown {

display: flex;

justify-content: center;

align-items: center;

background-color: #fff;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

padding: 20px;

}

.countdown-item {

text-align: center;

margin: 0 20px;

}

.countdown-item span {

font-size: 2em;

font-weight: bold;

}

.countdown-item p {

font-size: 1.2em;

color: #888;

}

«`

Эти стили обеспечивают красивый и центрированный дизайн нашего элемента обратного отсчета.

  • JavaScript

Теперь перейдем к созданию JavaScript-кода, который будет управлять таймером обратного отсчета. Мы будем использовать встроенные функции JavaScript для работы с датой и временем.

«`javascript

// app.js

const countdownDate = new Date(‘2023-12-31 00:00:00’).getTime(); // Задайте дату окончания обратного отсчета

const updateCountdown = () => {

const now = new Date().getTime();

const distance = countdownDate — now;

if (distance < 0) {

// Обратный отсчет завершен

document.getElementById(‘days’).textContent = ’00’;

document.getElementById(‘hours’).textContent = ’00’;

document.getElementById(‘minutes’).textContent = ’00’;

document.getElementById(‘seconds’).textContent = ’00’;

} else {

const days = Math.floor(distance / (1000 * 60 * 60 * 24));

const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

const seconds = Math.floor((distance % (1000 * 60)) / 1000);

document.getElementById(‘days’).textContent = days < 10 ? `0${days}` : days;

document.getElementById(‘hours’).textContent = hours < 10 ? `0${hours}` : hours;

document.getElementById(‘minutes’).textContent = minutes < 10 ? `0${minutes}` : minutes;

document.getElementById(‘seconds’).textContent = seconds < 10 ? `0${seconds}` : seconds;

}

};

// Обновление каждую секунду

setInterval(updateCountdown, 1000);

// Инициализация таймера

updateCountdown();

«`

Этот код устанавливает целевую дату обратного отсчета, затем в функции `updateCountdown` рассчитывает оставшееся время в днях, часах, минутах и секундах. Затем он обновляет содержимое элементов HTML с соответствующими ID.

  • Использование библиотеки jQuery (по желанию)

Если вы предпочитаете использовать jQuery, вам нужно добавить его в ваш проект и использовать его для упрощения манипуляций DOM и анимаций. Вот пример того, как вы можете сделать это с jQuery:

«`javascript

// app.js с использованием jQuery

const countdownDate = new Date(‘2023-12-31 00:00:00’).getTime(); // Задайте дату окончания обратного отсчета

const updateCountdown = () => {

const now = new Date().getTime();

const distance = countdownDate — now;

if (distance

< 0) {

// Обратный отсчет завершен

$(‘.countdown-item span’).text(’00’);

} else {

const days = Math.floor(distance / (1000 * 60 * 60 * 24));

const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

const seconds = Math.floor((distance % (1000 * 60)) / 1000);

$(‘#days’).text(days < 10 ? `0${days}` : days);

$(‘#hours’).text(hours < 10 ? `0${hours}` : hours);

$(‘#minutes’).text(minutes < 10 ? `0${minutes}` : minutes);

$(‘#seconds’).text(seconds < 10 ? `0${seconds}` : seconds);

}

};

// Обновление каждую секунду

setInterval(updateCountdown, 1000);

// Инициализация таймера

updateCountdown();

«`

Заключение

Создание часов обратного отсчета с использованием JavaScript, HTML и CSS — это простой и эффективный способ добавить интерактивный элемент на ваш сайт. Вы можете настроить дату окончания, стилизацию и анимации в соответствии с вашими потребностями.

3-дневный курс
НАУЧИСЬ СОЗДАВАТЬ TELEGRAM-БОТОВ НА PYTHON С CHATGPT
C НУЛЯ ЗА 3 ДНЯ
  • Освой Python и нейросети и узнай, как гарантированно получить первые 10 заказов
  • УЧАСТВОВАТЬ ЗА 0 РУБ.
  • Создай и прокачай собственного чат-бота
Участвовать бесплатно
ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
Участвовать бесплатно