Hello! Need a reverse report timer, after the expiration of which throws to index.html. The timer appears after 30 seconds of inactivity of the user, if the user does not have time to click - throws on the main page. If you have time, the timer closes. enter image description here

Closed due to the fact that the essence of the question is incomprehensible by the participants Alexey Shimansky , pavel , user194374, Denis Bubnov , aleksandr barakin 1 Jan '17 at 22:29 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

    2 answers 2

    The complete code snippet for this task.
    For a clearer demonstration, I did an idle interval of 3 seconds, not 30. And I changed the return report from 60 to 6 seconds.

    $(function() { var idleTimeout; var countdownTimeout; resetTimer(); $(document).on("mousemove keydown scroll", function() { // если модальное окно спрятано, то сбрасываем таймер при активности if (!$(".timer-popup").is(":visible")) { resetTimer(); } }); $(".timer-popup__button").click(function() { resetTimer(); clearTimeout(countdownTimeout); }); function showTimer() { $(".timer-popup").css("display", "inline-flex"); $(".timer-popup__time").text("6"); var redirect = function() { /* Укажите url вашей страницы */ window.location = "http://stackoverflow.com"; }; showSeconds(redirect); } function resetTimer() { $(".timer-popup").css("display", "none"); clearTimeout(idleTimeout); idleTimeout = setTimeout(showTimer, 3000); } function showSeconds(callback) { countdownTimeout = setTimeout(function() { var seconds = parseInt($(".timer-popup__time").text()); if (seconds === 0) { callback(); return false; } $(".timer-popup__time").text((--seconds).toString()); showSeconds(callback); }, 1000); } }); 
     * { /* Просто для красоты установил шрифт */ font-family: Arial; } body { margin: 0; } .timer-popup { background-color: #000; color: #fff; padding: 20px 30px; /* Прячем диалог */ /* Когда будем показывать установим inline-flex */ display: none; flex-direction: column; /* Отцентрировать содержимое по горизонтали */ align-items: center; position: absolute; /* Отцентрировать по горинтали и вертикали */ top: 50%; left: 50%; transform: translate(-50%, -50%); } .timer-popup__caption { font-size: 20px; white-space: nowrap; } .timer-popup__time { margin-top: 5px; font-size: 50px; } .timer-popup__button { outline: 0; background-color: #000; color: #fff; padding: 5px 10px; border: 1px solid #fff; border-radius: 5px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="timer-popup"> <span сlass="timer-popup__caption">Press OK to Continue</span> <span class="timer-popup__time">6</span> <button class="timer-popup__button"> OK </button> </div>

    • You look more clean - Yuri
    • Vadim, it seems to me that for help in developing this small project you can take a share)) Thank you very much for the answers and for all the help in general. I, of course, understand that it is not very nice to ask such questions that I have been asking lately, but I took a project that turned out to be rather difficult. He made a lot of lessons from this and sent for review already - Atomrr
    • Sorry, you can not accept 2 answers correct :) - Atomrr
    • @Atomrr Yes, I would not say that. What you think is more useful, take it. It is extremely rare when answers are equally useful. - Vadim Ovchinnikov
    • Your answer is more informative, as for, pretty much, green in js me, and I would take your answer on further armament as a gist :) But in general, you need to start studying thoroughly today js - Atomrr

     $(function() { var tim = function() {setTimeout(function() { var t = 60; $('.timer .time').text(t); $('.timer').css({display: 'block'}); var int = setInterval(function() { t--; if(t == -1){ clearInterval(int); location.href = 'index.html'; }else{ $('.timer .time').text(t); } }, 1000); $('button').click(function() { clearInterval(int); $('.timer').css({display: 'none'}); tim(); }); }, 30000)}; tim(); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="timer" style="display:none"> <span class="time"></span> <button>Кликни</button> </div>

    • Thank you very much for the answer. It only opens in a new tab, but can it be in the same one, in which the timer is started? - Atomrr
    • And, if possible, after the click - it closes and no longer appears. It is necessary that it be launched again after some time. I would be very grateful - Atomrr
    • @Atomrr, hold. And my advice: do not ask such questions. No one else will write code for you. This is not a forum. Here, people help to correct mistakes, and not to write code - Yuri
    • Thank you very much. Yes, I understood it and horror how uncomfortable it is to ask here. The project took, which is not pulled, as it turned out. - Atomrr
    • @Atomrr Yuri, of course, is right, but I really liked your question and I got a lot of pleasure from developing a solution for this task :) - Vadim Ovchinnikov