|
Сообщение от Tavol
|
|
Да, мне нужен таймер, но мне нужно 2 таких таймера на странице
|
Вам следует описать класс таймер и использовать его для создания определённых таймеров...
<!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 = new Date();
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() {
setTimeout(loop, 500);
timers.forEach(function(data) {
var timer = data.timer;
if(!timer.isTicking) return;
var time = Math.floor(0.001 * Math.max(0, timer.duration - (new Date() - timer.startDate)));
if(time === 0) {
timer.isTicking = false;
}
var timerString = ("0" + (time / 60 | 0)).slice(-2) + ":" + ("0" + (time % 60)).slice(-2);
document.getElementById(data.id).innerHTML = timerString;
document.getElementById(data.messageId).innerHTML = timer.isTicking ? data.messages.waiting : data.messages.finished;
});
});
</script>
<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>
</html>
Если вам не нужно добавление новых таймеров позже (после того так закончились таймеры в массиве), то вы можете дописать проверку, нужно ли ещё запускать функцию loop. (строка №33)