Блог

Я пытаюсь закодировать какую-то функцию для страницы, но я не могу собрать воедино все части:-(

Все, что мне нужно, это простой счетчик, который считает до 0, а затем показывает сообщение (.подтверждение). При прерывании работы (перемещении мыши или касании keyobaord) счетчик приостанавливается и показывает другое сообщение (.warning), а через несколько секунд повторите отсчет с начала. Уф…

У меня есть элемент для мониторинга действий пользователя и продолжения, но я не знаю, как добавить это вместе:

        //monitors user action
        $('.warning, .confirmation').hide();

        $(document).bind('mousemove keydown', function() {
            $('.warning').show().delay(2000).fadeOut(500);
        }); 

        //counts for example from 5 seconds (this value is in the <span></span> in html section) 
        var sec = $('#box span').text()
        var timer = setInterval(function() {
           $('#box span').text(--sec);
           if (sec == 0) {
              $('.confirmation').show(function() {
                $(document).unbind();
              });
              clearInterval(timer);
           }
        }, 1000);
  

Попробуйте что-то подобное:

         //countdown pause timer
        var countDownPauseTimer = 0;
        
        //monitors user action
        $('.warning, .confirmation').hide();

        $(document).bind('mousemove keydown', function() {
            countDownPauseTimer = 10; // Countdown will pause for 10 seconds
            $('.warning').show().delay(2000).fadeOut(500);
        }); 

        //counts for example from 5 seconds (this value is in the <span></span> in html section) 
        var sec = $('#box span').text()
        var timer = setInterval(function() {
           if (countDownPauseTimer > 0)
                countDownPauseTimer--;
           else
                $('#box span').text(--sec);
           if (sec == 0) {
              $('.confirmation').show(function() {
                $(document).unbind();
              });
              clearInterval(timer);
           }
        }, 1000);
  

Что я здесь сделал, так это ввел другую переменную, чтобы указать, что мы приостанавливаем обратный отсчет, и удерживать количество секунд, оставшихся для паузы.

В интервале я проверяю, есть ли пауза, и решаю, какое значение уменьшить…

Я не тестировал это, но это должно сработать.

Обновить

Ниже приведен обновленный код с перезапуском обратного отсчета после окончания паузы:

         //countdown pause timer
        var countDownPauseTimer = -1;
        
        //monitors user action
        $('.warning, .confirmation').hide();

        $(document).bind('mousemove keydown', function() {
            countDownPauseTimer = 10; // Countdown will pause for 10 seconds
            $('.warning').show().delay(2000).fadeOut(500);
        }); 

        //counts for example from 5 seconds (this value is in the <span></span> in html section) 
        var sec = $('#box span').text();
        var timer = setInterval(function() {
           if (countDownPauseTimer > 0)
                countDownPauseTimer--;
           else if (countDownPauseTimer == 0) {
                countDownPauseTimer--;
                sec = $('#box span').text();
           }
           else
                $('#box span').text(--sec);
           if (sec == 0) {
              $('.confirmation').show(function() {
                $(document).unbind();
              });
              clearInterval(timer);
           }
        }, 1000);