Бесконечный таймер обратного отсчета с интервалом

Question

При написании сайта(вёрстка), столкнулся с таймером обратного отсчёта от 10 секунд и до 0 секунд.
После данного отсчёта таймер должен подождать 5 секунд, при этом на табло должны быть числа 00:00, и заново начать обратный отсчёт от 10 секунд и до 0 секунд, и так до бесконечности.
Другими словами, - бесконечный обратный таймер от 10 секунд до 0 секунд с интервалом в 5 секунд)

<script language="JavaScript" type="text/javascript">
        var sec=10;
        var min=00;

        function refresh()
        {
          sec--;
          if(sec==-01){sec=59; min=min-1;}
          else{min=min;}
          if(sec<=9){sec="0" + sec;}
          time=(min<=9 ? "0"+min : min) + ":" + sec;
          if(document.getElementById){timer.innerHTML=time;}
          inter=setTimeout("refresh()", 1000);
          if(min=='00' && sec=='00'){
          sec="00";
          //не знаю, что написать дальше.
          clearInterval(inter);

          }
       }
    </script>

Answer 1

Если исходить из поставленной задачи (только секунды), то всё просто и наглядно:

let oH1 = document.querySelector('#countdown');
let nSec = 10;

function fCountdown() {
  oH1.textContent = '00:' + (nSec < 10 ? '0' + nSec : nSec);
  if (!nSec) {
    clearInterval(tCountdown);
    setTimeout(() => {
      nSec = 10;
      tCountdown = setInterval(fCountdown, 1000);
    }, 5000);
  }
  nSec--;
}

let tCountdown = setInterval(fCountdown, 1000);

h1 { text-align: center; font: 72px monospace; }

<h1 id="countdown"></h1>

Если нужны ещё и минуты:

let oH1 = document.querySelector('#countdown');
let nMin = 1;
let nSec = 5;

function fCountdown() {
  oH1.textContent = (nMin < 10 ? '0' + nMin : nMin) + ':' + (nSec < 10 ? '0' + nSec : nSec);
  if (!nSec) {
    if (!nMin) {
      clearInterval(tCountdown);
      setTimeout(() => {
        nSec = 10;
        tCountdown = setInterval(fCountdown, 1000);
      }, 5000);
    } else {
      nSec = 60;
      nMin--;
    }
  }
  nSec--;
}

let tCountdown = setInterval(fCountdown, 1000);

h1 { text-align: center; font: 72px monospace; }

<h1 id="countdown"></h1>

БЛОГ НА HUSL

Бесконечный таймер обратного отсчета с интервалом

Ответы (1 шт):