Подскажите, пожалуйста, может кто-то знает хороший готовый пример реализации таймера по истечению которого человеку предлагается забрать подарок
1 ответ
Ку. Годится?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="bg">
<div class="timer-close">×</div>
<div data-progress="0">
<div class="quad quad1"></div>
<div class="quad quad2"></div>
<div class="quad quad3"></div>
<div class="quad quad4"></div>
<div class="wrapper">
<div class="timer">
<span class="timer__top-text">через</span>
<div class="timer__content">
<span class="timer-out counter">100</span>
<span>сек.</span>
</div>
<span class="timer__bottom-text">ты получишь подарок</span>
</div>
</div>
</div>
</div>
<div class="modal">
ПОДАРОК
</div>
</body>
</html>
body {
color: #fff;
font-family: sans-serif;
}
.wrapper {
width: 96%;
height: 96%;
background-color: blue;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.timer {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.timer-close {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
position: absolute;
top: 8px;
right: 8px;
z-index: 999;
color: #000;
background-color: #f1d522;
border-radius: 50%;
border: 1px solid #fff;
cursor: pointer;
}
.timer__top-text {
text-transform: uppercase;
margin-top: 20px;
}
.timer__content {
margin-top: 20px;
}
.timer-out {
font-size: 42px;
}
.timer__bottom-text {
text-align: center;
max-width: 130px;
font-size: 19px;
margin-top: 13px;
}
div[data-progress] {
box-sizing: border-box;
height: 200px;
width: 200px;
border-radius: 50%;
transition: all 1s;
overflow: hidden;
margin: 40px auto;
position: relative;
}
[data-progress] > .quad {
position: absolute;
height: 50%;
width: 50%;
border-radius: 0;
}
.quad1,
.quad2 {
left: 50%;
transform-origin: left bottom;
}
.quad3,
.quad4 {
left: 0;
transform-origin: right top;
}
.quad1, .quad4 {
top: 0;
}
.quad2, .quad3 {
top: 50%;
}
.quad1, .quad3 {
transform: skew(0deg);
}
.quad2, .quad4 {
transform: skewY(0deg);
}
.quad {
background: white;
}
.bg {
width: 210px;
height: 210px;
background-color: blue;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.modal {
background-color: #dea2a2;
width: 150px;
height: 100px;
justify-content: center;
align-items: center;
display: none;
}
es6
const progressbar = document.querySelector('div[data-progress]'),
quad1 = progressbar.querySelector('.quad1'),
quad2 = progressbar.querySelector('.quad2'),
quad3 = progressbar.querySelector('.quad3'),
quad4 = progressbar.querySelector('.quad4'),
counter = progressbar.querySelector('.counter')
let progress
const incrementProg = () => {
progress = progressbar.getAttribute('data-progress')
progressbar.setAttribute('data-progress', ++progress)
counter.textContent = 100 - parseInt(progress, 10)
setPie(progress)
if (progress === 100) {
document.querySelector('.modal').style.display = 'flex'
clearInterval(progInc)
}
}
const progInc = setInterval(incrementProg, 1000)
const attr = ($el, tf, p, n, n1) => $el.style.transform = tf + '(' + (p || ((progress - (n || 0)) * ((n1 || 90) / 25))) + 'deg)'
const setPie = progress => {
if (progress <= 25) {
attr(quad1, 'skew', false, 0, -90)
} else if (progress > 25 && progress <= 50) {
attr(quad2, 'skewY', false, 25)
} else if (progress > 50 && progress <= 75) {
attr(quad3, 'skew', false, 50, -90)
} else if (progress > 75 && progress <= 100) {
attr(quad4, 'skewY', false, 75)
}
}
document.querySelector('.timer-close').addEventListener('click', () => {
document.querySelector('.bg').style.display = 'none'
})