Простой таймер обратного отчёта

В данной записи я покажу вам реализацию простого таймера обратного отчёта для сайта, на JavaScript. Данный таймер будет обновляться после каждой перезагрузке страницы.

Демо

HTML

В качестве основного контейнера для таймера я использую элемент с идентификатором good_timer. Для вывода количества часов, минут, секунд используются следующие элементы: hourForTimer, minForTimer, secForTimer.

<body onload="good_timer()">
  <div id="good_timer">
   <div class="timerElem hourForTimer"></div>
   <div class="symbol">:</div>
   <div class="timerElem minForTimer"></div>
   <div class="symbol">:</div>
   <div class="timerElem secForTimer"></div>
  </div>
  <script src="main.js"></script>
</body>

CSS

Стили я использую простые, здесь нет строгих правил.

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
body {
 background: #42445A
}
#good_timer{
 width: 100%;
 display: flex;
 flex-direction: row;
 font-family: 'Fredoka One', cursive;
}
#good_timer .timerElem {
 width: 60px;
 padding: 15px 0;
 margin: 0 10px;
 display: block;
 background: #fefefe;
 font-size: 45px;
 text-align: center;
 color: #303134;
 border-radius: 6px;
}
#good_timer .symbol {
 color: #fefefe;
 font-size: 45px;
 padding-top: 10px;
}

JavaScript

Логика работы таймера основана на циклическом перезапуске функции каждую секунду с помощью функции setTimeout

В самом начале указываем количество секунд, минут и часов. Далее находим контейнеры в которые мы будем заносить информацию. Ниже создаём функцию в которой будем прописывать основную логику работы таймера.

В функции я прописал условия которые проверяют количество оставшихся секунд и на основе их количества изменяют количество минут и соответственно часов, по окончанию таймера вы можете провести какое то действие, запустив стороннюю функцию.

В конце мы помещаем значения в соответствующие элементы HTML и перезапускаем нашу функцию.

/*задаем значения времени*/
var sec = 3;
var min;
var hour = 1;

let secBlock = document.querySelector('.secForTimer');
let minBlock = document.querySelector('.minForTimer');
let hourBlock = document.querySelector('.hourForTimer');

function good_timer() {

    if (sec == undefined) sec = 0;
    if (min == undefined) min = 0;
    if (hour == undefined) hour = 0;

    if (sec == 0) {
        if (min >= 1) {
            min--;
            sec = 60;
        } else if (min == 0 && hour == 0) {
            /*код выполняется когда указанное время прошло*/
            console.log("конец");
            return;
        } else if (min < 1) {
            if (hour <= 0) {
                hour = 0;
                min = sec = 60;
            } else {
                hour--;
                min = sec = 60;
            }
        } else {
            min--;
        }
    } else {
        sec--;
    }

    secBlock.innerHTML = sec;

    minBlock.innerHTML = min;
    hourBlock.innerHTML = hour;

    /*перезапускаем функцию, через секунду*/
    setTimeout("good_timer()", 1000);
}
На этом всё!
Больше интересных статей в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime