Показать сообщение отдельно
  #5 (permalink)  
Старый 10.04.2020, 22:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,780

таймер timer

<!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>
Ответить с цитированием