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
    Commented 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
    Commented 4 дек. 2022 в 15:30

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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