Добро пожаловать в блог Codewithrandom. В этом блоге мы узнаем, как создать Таймер обратного отсчета. Мы используем HTML, CSS и JavaScript для этого таймера обратного отсчета.
Таймер обратного отсчета с использованием JavaScript[/caption]
Надеюсь, вам понравится наш блог, так что давайте начнем с базовой HTML-структуры для таймера обратного отсчета.
HTML-код для таймера обратного отсчета
<div class="card"> <div class="number"></div> </div>
Есть весь html код для обратного отсчета таймера. Теперь вы можете увидеть вывод без Css и JavaScript. затем пишем css для стилизации и придаем основной функционал таймера обратного отсчета с помощью javascript.
Выход
простой вывод на пустой экран
Код CSS для таймера обратного отсчета
:root {
--background-color: #0e1538;
--text-color: #fff;
--font: sans-serif;
}
* {
margin: 0;
padding: 0;
}
body {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: var(--background-color);
font-family: var(--font);
}
/* main Card */
.card {
width: 200px;
height: 275px;
position: relative;
user-select: none;
cursor: pointer;
transition: 0.3s ease-in-out;
}
/* Linear Background by using ::before */
.card::before {
content: "";
position: absolute;
top: -4px;
left: -4px;
bottom: -4px;
right: -4px;
transform: skew(2deg, 4deg);
background: linear-gradient(315deg, #00ccff, #0e1538, #d400d4);
}
/* countdown number */
.card > .number {
width: 100%;
height: 100%;
position: absolute;
z-index: 10;
font-size: 8em;
display: grid;
place-items: center;
background-color: var(--background-color);
color: var(--text-color);
}
.card:hover {
transform: scale(1.1);
box-shadow: 0 0 200px rgba(225, 225, 225, 0.3);
transform: rotate(720deg);
}
Мы завершили наш раздел CSS для обратного отсчета. Вот наш обновленный вывод HTML + CSS.
Вывод
Код JavaScript для таймера обратного отсчета
var number = document.querySelector(".number");
var count = 20;
// Countdown Interval which runs on every 1s
var countdownInterval = setInterval(() => {
// if count is less than or equal to 1 then clear the Interval
count <= 1 && clearInterval(countdownInterval);
number.textContent = count <= 10 ? `0${--count}` : `${--count}`;
}, 1000);
Таймер обратного отсчета с использованием JavaScript
Таймер обратного отсчета с использованием JavaScript[/caption]
Мы завершили наш проект таймера обратного отсчета. Вот наш обновленный вывод с Html, Css и JavaScript. Надеюсь, вам понравился Таймер обратного отсчета. вы можете увидеть выходное видео и скриншоты проекта. Смотрите другие наши блоги и получайте знания в области фронтенд-разработки.
Спасибо!
В этом посте мы узнаем, как создать Таймер обратного отсчета с помощью HTML, CSS и JavaScript. Если мы допустили ошибку или какую-либо путаницу, пожалуйста, оставьте комментарий, чтобы ответить или помочь вам легко учиться.
Автор — Code With Random/Anki
