Виникла потреба вивести на екран таймер зворотного відліку. Однією з обов'язкових умов є те, що відлік часу повинен починатися одразу під час завантаження сторінки.
Для реалізації поставленого завдання пишемо наступний HTML код:
<div class="countdown-box">
<div class="num-first">1</div>
<div class="num-second">1</div>
<div class="num-third">1</div>
</div>
За допомогою CSS оформляємо наш лічильник:
.countdown-box {
width: 200px;
height: 70px;
display: inline-flex;
}
.num-first,
.num-second,
.num-third {
font-size: 36px;
border: 2px solid red;
border-radius: 10px;
background-color: #fff;
width: 83.333333px;
height: 70px;
display: flex;
justify-content: space-around;
align-items: center;
color: red;
}
.num-first,
.num-second {
margin-right: 10px;
}
І звичайно ж додаємо JS код:
window.onload = function() {
let n1 = document.querySelector('.num-first')
let n2 = document.querySelector('.num-second')
let n3 = document.querySelector('.num-third')
let counter = 111
timer_id = setInterval(() => {
counter--
n1.innerText = Math.floor(counter/100)
n2.innerText = Math.floor(counter%100/10)
n3.innerText = counter%10
if (counter == 0) clearInterval(timer_id)
}, 1000)
}