Пишем HTML код:
Пишем наш стиль:
Пишем jquery:
Смотрим наш результат:
HTML:
<div class="container">
<div class="countdown">
<header>
<p>С новым годом</p>
</header>
<ul>
<li style="background: #EF2F3C">
<span></span>
<p>Дней</p>
</li>
<li style="background: #FFFFFF">
<span></span>
<p style="color: #18315A">Часов</p>
</li>
<li style="background: #276FC1">
<span></span>
<p>Минут</p>
</li>
<li style="background: #E59A02">
<span></span>
<p>Секунд</p>
</li>
</ul>
</div>
</div>
<div class="balloon red"></div>
<div class="balloon blue"></div>
<div class="balloon yellow"></div>
<div class="balloon white"></div>
CSS:
@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #18315A;
font-family: "Oswald";
overflow: hidden;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container .countdown {
color: #ffffff;
width: 60%;
}
.container .countdown header {
padding: 20px;
}
.container .countdown header p {
font-size: 42px;
text-align: center;
}
.container .countdown ul {
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.container .countdown ul li {
text-align: center;
width: 100%;
padding: 15px 0;
margin: 0 5px;
border-radius: 5px;
}
.container .countdown ul li span {
font-size: 32px;
color: #18315A;
font-weight: bold;
}
.container .countdown ul li p {
font-size: 24px;
color: #ffffff;
}
.balloon {
position: absolute;
width: 50px;
height: 60px;
border-radius: 45%;
z-index: -1;
}
.balloon::before {
content: "";
width: 5px;
height: 50px;
background: #000000;
position: absolute;
left: calc(50% - 2.5px);
top: 100%;
z-index: -1;
}
.balloon::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
left: calc(50% - 5px);
top: 100%;
}
.balloon.red::after {
background: #EF2F3C;
}
.balloon.red {
background: #EF2F3C;
}
.balloon.white::after {
background: #FFFFFF;
}
.balloon.white {
background: #FFFFFF;
}
.balloon.blue::after {
background: #276FC1;
}
.balloon.blue {
background: #276FC1;
}
.balloon.yellow {
background: #E59A02;
}
.balloon.yellow::after {
background: #E59A02;
}
@media (max-width: 770px) {
.countdown > ul {
margin: auto;
width: 60% !important;
flex-direction: column !important;
}
.countdown > ul li {
margin: 5px 0 !important;
padding: 10px 0 !important;
}
}
JavaScript:
let timeElements = document.querySelectorAll('.countdown>ul>li');
function getRemainTime(deadline) {
let now = new Date(),
remainTime = (new Date(deadline) - now + 1000) / 1000,
remainSeconds = ('0' + Math.floor(remainTime % 60)).slice(-2),
remainMinutes = ('0' + Math.floor(remainTime / 60 % 60)).slice(-2),
remainHours = ('0' + Math.floor(remainTime / 3600 % 24)).slice(-2),
remainDays = Math.floor(remainTime / (3600 * 24));
timeElements[0].firstElementChild.innerHTML = remainDays;
timeElements[1].firstElementChild.innerHTML = remainHours;
timeElements[2].firstElementChild.innerHTML = remainMinutes;
timeElements[3].firstElementChild.innerHTML = remainSeconds;
}
setInterval(() => getRemainTime('Jan 1 2023 00:00:00 GMT-0300'), 1000)
// Balloons
window.onload = () => {
console.log(Math.random() * 100)
document.querySelector('.blue').style = `left: ${Math.random () * 90}%; top: ${Math.random() * 90}%`;
document.querySelector('.red').style = `left: ${Math.random () * 90}%; top: ${Math.random() * 90}%`;
document.querySelector('.white').style = `left: ${Math.random () * 90}%; top: ${Math.random() * 90}%`;
document.querySelector('.yellow').style = `left: ${Math.random () * 90}%; top: ${Math.random() * 90}%`;
goUp()
};
let balloons = document.querySelectorAll('.balloon');
function goUp() {
balloons.forEach(index => {
let ypos = parseInt(index.style.top.slice(0, index.style.top.length - 1));
let xpos = parseInt(index.style.left.slice(0, index.style.left.length - 1));
if (ypos > -110) {
ypos -= 1;
index.style = `top: ${ypos}%; left: ${xpos}%;`;
} else {
ypos = Math.random() * (200 - 100) + 100;
xpos = Math.random() * 90;
index.style = `top: ${ypos}%; left: ${xpos}%;`;
}
})
requestAnimationFrame(goUp)
}