ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Таймер посетителя при бездействии на jQuery

Таймер посетителя при бездействии на jQuery

Это таймер для посетителей сайта или блога, который запускается в заданное вами время, а точнее для обозначения бездействий на сайте. Где вы просто может зашли на страницу сайта, и сразу автоматический включается таймер, если вы не чего не делаете, а точнее как зашли и не трогали страницу, и она остается заданное время как была открыта, то появится небольшой баннер виде фигуры. Фигура может быть анимационной, как здесь. Но стоит вам скопировать или немного пролистнуть страницу, то автоматически таймер сбрасывается, и начинает обратно отсчитывать.

В данном коде таймер выставлен на 60 секунд, но вы можете сделать больше или меньше, все безусловно от тематики зависит. Не нужно ставить на читабельный портал, так как вы читаете, и не чего на странице не делаете, и безусловно таймер в данном случай будет мешать. А так интересный код, который будет просто гостей сайта предупреждать, что вы зашли на страницу, но не каких действий не происходит. Сама функция на любителя, если что, то можно поставить ее на некоторое время, но дать больше времени, чтоб не мешал пользователю.

Приступаем к установке:

В head

Код

HTML

Код

CSS

Код

.atimer {
  display: none;
  background: rgba(255,255,255,0.9);
  padding: 16px 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99998;
  text-align: center;
  box-shadow: 0 15px 15px 1px rgb(0 0 0 / 10%);
  box-sizing: border-box;
}
.atimer-text p {
  font-size: 16px;
  margin: 0 0 6px;
}
.atimer-time {
  margin-top: 10px;
  height: 8px;
  width: 0;
  background: #337AB7;
  transition: width 4.9s linear;
}
.atimer-time.timerun {
  width: 100%;
}
.atimer-pinguin {
  max-width: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  background: #F6FCFF;
  padding: 26px;
  border-radius: 50%;
  box-shadow: 0 15px 15px 1px rgb(0 0 0 / 10%);
  border: 8px solid #BFE2FF;
  overflow: hidden;
  display: none;
}

jQuery

Код

let aTimer1,
aTimer2,
aUser = false,
aWait1 = 60000, // 60 секунд до показа предупредительного окна
aWait2 = 60000; // 60 секунд до основного действия
$(window).on('load click scroll', function(){
  clearTimeout(aTimer1);
  clearTimeout(aTimer2);
  if(aUser == true){
  // Действия при возвращении пользователя
  $('.atimer').fadeOut();
  $('.atimer-time').removeClass('timerun');
  $('.atimer-pinguin').fadeOut();
  }
  aUser = false;
  aTimer1 = setTimeout(function(){
  // Действия при отсутствии пользователя
  $('.atimer .atimer-text').html('<p>Данная страница долгое время находится в покое, а значит сейчас появится заставка</p><p>Чтоб убрать баннер, просто сделайти клик или прокрутте колесико на шышке.</p>');
  $('.atimer').fadeIn();
  $('.atimer-time').addClass('timerun');
  aUser = true;
  aTimer2 = setTimeout(function(){
  $('.atimer-pinguin').html('<img src="https://zornet.ru/_fr/81/9384901.gif">');
  $('.atimer-pinguin').fadeIn();
  $('.atimer').fadeOut();
  }, aWait2);
  }, aWait1);
});

На это все, все можно посмотреть по работе на demo-странице.

Демонстрация
Автор, источник: Atuin.ru

11 Января 2024 Загрузок: 1 Просмотров: 1280 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0