Как запустить обратный отсчёт при загрузке страницы (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)
}