Как сделать - Страницу заставки
Узнать, как создать "страницу заставки" с помощью CSS и JavaScript.
Страница заставки
Создать страницу заставки
Шаг 1) Добавить HTML:
В нашем примере мы будем использовать фоновое изображение, которое покрывает всю страницу и помещает некоторый текст в изображение, чтобы пользователь знал, что происходит.
В этом примере показано, как создать "Скоро появится страница" только с HTML и CSS. Посмотрите на следующий пример, чтобы узнать, как добавить "таймер обратного отсчета" с JavaScript, а также.
Пример
<div class="bgimg">
<div class="topleft">
<p>Логотип</p>
</div>
<div class="middle">
<h1>СКОРО БУДЕТ</h1>
<hr>
<p>35 дней</p>
</div>
<div class="bottomleft">
<p>Некоторый текст</p>
</div>
</div>Шаг 2) Добавить CSS:
Пример
/* Установите высоту 100% для body и html, чтобы фоновое изображение покрывало всю страницу: */
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("July 15, 2021 04:00:00").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 = День + "d " + Час + "h "
+ минуты + "m " + секунды + "s ";
// Если обратный отсчет завершен, напишите текст
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "ИСТЕКЛО";
}
}, 1000);Редактор кода »