Таймер обратного отчета jquery [требует правки]

406
03 января 2017, 00:18

Здравствуйте! Нужен таймер обратного отчета, по истечению которого перебрасывает на index.html. Таймер появляется спустя 30 секунд неактивности пользователя, если пользователь не успевает кликнуть - перебрасывает на главную страницу. Если успевает - таймер закрывается.

Answer 1

Полный фрагмент кода для этой задачи.
Для более наглядной демонстрации я сделал интервал простоя 3 секунды, а не 30. А обратный отчёт изменил с 60 до 6 секунд.

$(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>

Answer 2

$(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>

READ ALSO
jQuery получение определеного значения

jQuery получение определеного значения

Есть Таблица и в ней есть строки <td> Получаю их значение с помощью jQuery таким образомНо он дает мне все значения td

317
Исполнение JS в HTML через google app script

Исполнение JS в HTML через google app script

Работаю в битриксеТам используются google таблицы

415
Приведение строки в численный формат

Приведение строки в численный формат

Уже всё разобралОсталось только приведение поля к числу

368
JavaScript APi google map

JavaScript APi google map

Есть карта на ней есть функция которая отображает имя или еще что-тоНо чтоб отобразилось окно маркера , надо на него нажжать

353