<!DOCTYPE html>
<html>
<head>
<title>Таймер</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function Timer(mins, secs) {
this.startDate = performance.now();
this.duration = 1000 * (secs + 60 * mins);
this.isTicking = this.duration > 0;
}
var timers = [{
id: "timer-1",
timer: new Timer(0, 20),
messageId: "timer-message-1",
messages: {
waiting: "Ждём первый таймер",
finished: "Дождались первый таймер"
}
}, {
id: "timer-2",
timer: new Timer(0, 5),
messageId: "timer-message-2",
messages: {
waiting: "Ждём второй таймер",
finished: "Дождались второй таймер"
}
}];
document.addEventListener("DOMContentLoaded", function loop() {
timers.forEach(function(data, i) {
var timer = data.timer;
if(!timer.isTicking) return;
var time = timer.duration - (performance.now() - timer.startDate);
if(time <= 0) {
timer.isTicking = false;
time = 0;
timers.splice(i, 1);
}
var timerString = new Date(time).toLocaleTimeString("ru", {minute : "2-digit", second : "2-digit"});
document.getElementById(data.id).innerHTML = timerString;
document.getElementById(data.messageId).innerHTML = timer.isTicking ? data.messages.waiting : data.messages.finished;
});
timers.length && requestAnimationFrame(loop);
});
</script>
</head>
<body>
<ul>
<li>
<span id="timer-1"></span>
<div id="timer-message-1"></div>
</li>
<li>
<span id="timer-2"></span>
<div id="timer-message-2"></div>
</li>
</ul>
</body>
</html>