0

У меня есть таймер, который не должен обнулятся при обновлении страницы. Сделать я хочу через сессию, но с js'ом я не дружу и не понимаю, как это мне сделать по-человечески. Важно, чтобы это все проходило через сессии, чтобы потом я мог ее обнулить, после отправки формы. Таймер:

<div class="quiz-timer">
   Времени прошло:<h1 id="timer">00:00:00</h1>
</div>
<script>
    var h1 = document.getElementById('timer');
    var sec = 0;
    var min = 0;
    var hrs = 0;
    var t;
                    
    function tick(){
        sec++;
        if (sec >= 60) {
            sec = 0;
            min++;
            if (min >= 60) {
                min = 0;
                hrs++;
            }
        }
    }
    function add() {
        tick();
        h1.textContent = (hrs > 9 ? hrs : "0" + hrs) 
                 + ":" + (min > 9 ? min : "0" + min)
                 + ":" + (sec > 9 ? sec : "0" + sec);
        timer();
    }
    function timer() {
        t = setTimeout(add, 1000);
    }
    
    timer();
</script>
1
  • После каждого тика записывать значение в localStorage(например) или sessionStorage и перед началом тика извлекать.
    – SwaD
    4 дек 2022 в 14:03

1 ответ 1

1
<div class="quiz-timer">
   Времени прошло:<h1 id="timer">00:00:00</h1>
</div>
<script>
    var h1 = document.getElementById('timer');
    var sec = sessionStorage.getItem('sec') || 0; // загрузка значения секунд из сессии или установка значения 0, если значение в сессии отсутствует
    var min = sessionStorage.getItem('min') || 0; // загрузка значения минут из сессии или установка значения 0, если значение в сессии отсутствует
    var hrs = sessionStorage.getItem('hrs') || 0; // загрузка значения часов из сессии или установка значения 0, если значение в сессии отсутствует
    var t;
                    
    function tick(){
        sec++;
        if (sec >= 60) {
            sec = 0;
            min++;
            if (min >= 60) {
                min = 0;
                hrs++;
            }
        }
        // сохранение значений времени в сессии
        sessionStorage.setItem('sec', sec);
        sessionStorage.setItem('min', min);
        sessionStorage.setItem('hrs', hrs);
    }
    function add() {
        tick();
        h1.textContent = (hrs > 9 ? hrs : "0" + hrs) 
                 + ":" + (min > 9 ? min : "0" + min)
                 + ":" + (sec > 9 ? sec : "0" + sec);
        timer();
    }
    function timer() {
        t = setTimeout(add, 1000);
    }
    
    timer();
</script>

Функция для обнуления таймера

function resetTimer() {
  // обнуление значений времени в сессии
  sessionStorage.setItem('sec', 0);
  sessionStorage.setItem('min', 0);
  sessionStorage.setItem('hrs', 0);

  // обнуление значений времени на странице
  h1.textContent = "00:00:00";

  // остановка таймера
  clearTimeout(t);
}
1
  • спасибо большое!
    – TheSirVlad
    4 дек 2022 в 15:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.