ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Адаптивный таймер обратного отсчета на JS

Адаптивный таймер обратного отсчета на JS

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

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

Так выглядит таймер при открытие страницы сайта:

Адаптивный таймер обратного отсчета на Javascript

Таймер обратного отсчета или часы, в которых часы, минуты, а также секунды обозначены цифрами, которые расположены в отдельном окне.

Установка:

HTML

Код

<!DOCTYPE html>
<html>
<head>
  <title>Простые часы обратного отсчета</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="overlay"></div>
  <div class="wrapper">
  <div class="">
  <h1 class="title"><span>2021</span> ЗДЕСЬ НАЗВАНИЕ САЙТА</h1>
  <div class="countdown-container">
  <div>
  <p id="days" class="big-text">0</p>
  <span>Days</span>
  </div>
  <div>
  <p id="hours" class="big-text">0</p>
  <span>Hours</span>
  </div>
  <div>
  <p id="min" class="big-text">0</p>
  <span>Min</span>
  </div>
  <div>
  <p id="sec" class="big-text">0</p>
  <span>Sec</span>
  </div>
  </div>
  </div>
  </div>

</body>
</html>

CSS

Код

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  background-image:url("https://mota.ru/upload/wallpapers/source/2011/03/02/09/05/24434/mota_ru_1030207.jpg");
  background-repeat: no-repeat;
  background-size:cover;
  background-position:top;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-family: 'Poppins', sans-serif;
  position: relative;
}
.overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.4);
  width:100%;
  height:100%;
  z-index:-1;
}
.countdown-container{
  display:flex;
}
.big-text{
  font-size:4rem;
}
.title{
  margin:10px;
  text-align:center;
  color:#fff;
  width:100%;
  letter-spacing:2px;
  font-size: 3rem;
  line-height: 5.5rem;
}
.title span{
  display:block;
  font-size:6rem;
  letter-spacing:2rem;
}
.wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap: wrap;
  min-height:100vh;
}
.countdown-container > div{
  margin:0 2rem;
  text-align: center;
  border:2px solid #fff;
  padding:0px 20px;
  border-radius: 12px;
  box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
  box-sizing: border-box;
  color:#fff;
  min-width:150px;
}
@media (max-width:992px){
  .countdown-container > div{
  margin:0 1rem;
  }
}
@media (max-width:767px){
  .countdown-container{
  flex-wrap: wrap;
  }
  .countdown-container > div{
  margin:1rem auto;
  max-width:150px;
  }
  .title{
  font-size: 1.5rem;
  line-height: 3.5rem;
  margin:10px 0px;
  }
  .title span{
  font-size: 2rem;
  letter-spacing: 1rem;
  }
}

Код

let daysItem = document.querySelector("#days");
  let hoursItem = document.querySelector("#hours");
  let minItem = document.querySelector("#min");
  let secItem = document.querySelector("#sec");

  let countDown = () => {
  let futureDate = new Date("1 Jan 2021");
  let currentDate = new Date();
  let myDate = futureDate - currentDate;
  //console.log(myDate);

  let days = Math.floor(myDate / 1000 / 60 / 60 / 24);

  let hours = Math.floor(myDate / 1000 / 60 / 60) % 24;

  let min = Math.floor(myDate / 1000 / 60) % 60;

  let sec = Math.floor(myDate / 1000) % 60;

  daysItem.innerHTML = days;
  hoursItem.innerHTML = hours;
  minItem.innerHTML = min;
  secItem.innerHTML = sec;
  }

  countDown()

  setInterval(countDown, 1000)

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

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

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

02 Февраля 2021 Загрузок: 4 Просмотров: 1394 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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