В данной записи я покажу вам реализацию простого таймера обратного отчёта для сайта, на 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);
}
