Как создать: "Скоро появится" страницу

Как создать страницу "Скоро появится"

Шаг 1 - Добавить HTML:

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

Этот пример демонстрирует, как использовать HTML и CSS для создания страницы "Скоро появится". Пожалуйста, посмотрите следующий пример, чтобы узнать, как использовать JavaScript для добавления "обратного отсчета".

<div class="bgimg">
  <div class="topleft">
    <p>Логотип</p>
  </div>
  <div class="middle">
    <h1>Скоро появится</h1>
    <hr>
    <p id="demo">35 дней</p>
  </div>
  <div class="bottomleft">
    <p>Некоторые тексты</p>
  </div>
</div>

Шаг 2 - Добавить CSS:

/* Установить высоту body и html в 100%, чтобы изображение фона покрывало всю страницу: */
body, html {
  height: 100%
}
.bgimg {
  /* Изображение фона */
  background-image: url('/w3images/forestbridge.jpg');
  /* Полный экран */
  height: 100%;
  /* Выровнять изображение фона по центру */
  background-position: center;
  /* Увеличить изображение */
  background-size: cover;
  /* Добавить position: relative для активации абсолютной定位 внутри изображения (размещение текста) */
  position: relative;
  /* Добавить белый цвет текста для всех элементов в контейнере .bgimg */
  color: white;
  /* Добавить шрифт */
  font-family: "Courier New", Courier, monospace;
  /* Установить размер шрифта в 25 пикселей */
  font-size: 25px;
}
/* В левом верхнем углу расположить текст */
.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}
/* В левом нижнем углу расположить текст */
.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}
/* В середине расположить текст */
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
/* Установите стиль элемента <hr> */
hr {
  margin: auto;
  width: 40%;
}

Попробуйте сами

Шаг 3 - Добавьте JavaScript:

Добавьте JavaScript, чтобы создать таймер обратного отсчета:

// Установите дату, для которой мы ведем обратный отсчет
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
// Обновление обратного отсчета каждые 1 секунду
var x = setInterval(function() {
  // Получение сегодняшней даты и времени
  var now = new Date().getTime();
  // Вычисление расстояния между текущим временем и датой обратного отсчета
  var distance = countDownDate - now;
  // Вычисление дней, часов, минут и секунд для времени
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  // Показываем результат в элементе с id="demo"
  document.getElementById("demo").innerHTML = days + "д " + hours + "ч ";
  + minutes + "м " + seconds + "с ";
  // Если обратный отсчет завершен, напишите несколько текстов.
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "ПРОШЛО";
  }

Попробуйте сами