JQuery пауза обратного отсчета и повторить - PullRequest
Новая
       29

JQuery пауза обратного отсчета и повторить

3 голосов
/ 12 апреля 2011

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

Все, что я хочу, - это простой счетчик, который считает 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);

1 Ответ

1 голос
/ 12 апреля 2011

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

        //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);
...