Як запустити зворотний відлік під час завантаження сторінки (Javascript)

Виникла потреба вивести на екран таймер зворотного відліку. Однією з обов'язкових умов є те, що відлік часу повинен починатися одразу під час завантаження сторінки.

Для реалізації поставленого завдання пишемо наступний 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)
}

Main Menu