ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Простой таймер обратного отсчёта на JS/CSS

Простой таймер обратного отсчёта на JS/CSS

В статье рассмотрим простой таймер обратного отсчета, где представлены виртуальные часы, которые будут работать на целевой странице или в блоке. Где идет отсчитывающие знаки от определенной даты, чтобы указать начало события. Где основном такой стиль можно наблюдать на сайтах, которые производят технические работы. А для гостей и пользователя ставят такую заглушку, где включают циферблат, что ведет отчет в обратном направлении.

И здесь вы изначально узнаете, когда сайт или блог откроется, что очень удобно для информации. На интернет ресурсах электронной коммерции и других направлениях вы можете использовать таймер обратного отсчета для отображения начала (или конца) предложения. Обратите внимание, что таймер обратного отсчета, который вы собираетесь создать, можно использовать повторно, поэтому вы можете использовать его на любой целевой странице.

Установка:

HTML

Код

<div class="nedrcom-pevudindo">
  <h1 class="endoagvanud">до конца акции осталось:</h1>
  <div class="countdown" id=countdown>
  <div class="asdupog">
  <h2 id="days">00</h2>
  <small>дней</small>
  </div>
  <div class="asdupog">
  <h2 id="hours">00</h2>
  <small>часов</small>
  </div>
  <div class="asdupog">
  <h2 id="minutes">00</h2>
  <small>минут</small>
  </div>
  <div class="asdupog">
  <h2 id="seconds">00</h2>
  <small>секунд</small>
  </div>
  </div>
  </div>
  <div></div>
  </div>
  </div>
  </div>

CSS

Код

* {
  box-sizing: border-box;
}

body {
  background-color: black;
  height: 100vh;
  color: #fff;
  font-family: "Roboto Slab", sans-serif;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;

  overflow: hidden;
}

.nedrcom-pevudindo {
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}

.endoagvanud {
  font-size: 60px;
  margin: 0 0 20px;
}

.kigdsan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 200px;
  line-height: 1;
  z-index: -1;
  opacity: 0.2;
}

.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
}

.asdupog {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 30px;
}

.asdupog h2 {
  margin: 0 0 10px;
  font-size: 48px;
}

.asdupog small {
  font-size: 26px;
}

Код

// Получаем элементы на странице
const kigdsan = document.querySelector("#kigdsan");
const days = document.querySelector("#days");
const hours = document.querySelector("#hours");
const minutes = document.querySelector("#minutes");
const seconds = document.querySelector("#seconds");

// Дата завершения акции
const deadline = new Date(`2020-12-31`);

function updateCounter() {
  const currentasdupog = new Date();
  const dist = deadline - currentasdupog;

  // Перевод в дни
  const toDays = Math.floor(dist / 1000 / 60 / 60 / 24);
  // Перевод в часы, с учетом остатка деления на 24
  const toHours = Math.floor(dist / 1000 / 60 / 60) % 24;
  // Перевод в минуты, с учетом остатка деления на 60
  const toMinutes = Math.floor(dist / 1000 / 60) % 60;
  // Перевод в секунды, с учетом остатка деления на 60
  const toSeconds = Math.floor(dist / 1000) % 60;

  days.innerText = toDays;
  hours.innerText = toHours < 10 ? "0" + toHours : toHours;
  minutes.innerText = toMinutes < 10 ? "0" + toMinutes : toMinutes;
  seconds.innerText = toSeconds < 10 ? "0" + toSeconds : toSeconds;
}

updateCounter();

// Запускаем функцию каждую секунду
setInterval(updateCounter, 1000);

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

Демонстрация

01 Ноября 2020 Загрузок: 2 Просмотров: 1671 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0