Форум

ufaclub · #1 (**permalink**) 03.12.2019, 21:02

есть скрипт подключенный ко всем страницам сайта

$('a.open').trigger('click');

т.е при любой загрузки страницы он открывает всплывающее окно с картинкой.

хочу сделать чтобы в сутки одному человеку максимум 3 раза показывалась это картинка.

т.е надо как то посчитать сколько страниц открыл человек на сайте

мол посмотрел 1 страницу счетчик +1 посмотрел вторую еще плюс 1 и еще одну и еще + 1 (i++) ну вы поняли.

на php через куки конечно могу написать. но нужно на js чтобы работало.

подключен плагин jQuery Cookie подскажите пожалуйста как сделать проще через cookie js ну и раз в сутки чтобы клиенту обнулялись значения просмотров.

т.е если человек посмотрел до 3х страниц то 3 раза должен выполниться скрипт

$('a.open').trigger('click');

рони · #2 (**permalink**) 03.12.2019, 23:38

ufaclub,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {

(function(num, key, fn, duration) {
var ar = JSON.parse(localStorage.getItem(key) || "[]");
var date = new Date;
ar = ar.filter(function(time) {
  return  time > date.getTime()
});
if(ar.length < num) {
   ar.push(date.getTime() + duration);
   localStorage.setItem(key, JSON.stringify(ar));
   fn(ar.length)
}
})(3, 'depository', function(length) {
  alert(length); // $('a.open').trigger('click');
}, 24 * 60 * 60 * 1000)
});
  </script>
</head>

<body>


</body>
</html>

Allaur · #3 (**permalink**) 29.01.2020, 22:03

Здравствуйте
Не стал создавать дубликат темы. Вопрос примерно тот же.
Есть всплывающее окно, которое появляется после прокрутки до определённого блока.

<script>
$(document).ready(function(){   
    var $element = $('.footer');
    $counter = 0;
$(window).scroll(function() {
  var scroll = $(window).scrollTop() + $(window).height();
  //Если скролл до конца елемента
  //var offset = $element.offset().top + $element.height();
  //Если скролл до начала елемента
  var offset = $element.offset().top;

  if (scroll > offset && $counter == 0) {
    $('#block').fadeIn(500);
    $counter = 1;
  }
});
$('.btn').click(function(){
	$('#block').slideUp();
});

   });
   </script>

#block{
	display: none;
	position: fixed;
	top: 15px;
	right: 15px;
	color: #fff;
	background: #4CAF50;
	padding: 10px;
	border-radius: 5px;
	width: 200px;
	box-shadow: 0 13px 20px -5px #3a3a3a;
	font-family: Arial;
	text-align: center;
}
.btn{
    background: #FF9800;
    border: 2px solid #795548;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px 10px;
    margin-top: 10px;
    font-weight: bold;
}

<div id="block">Текст, написанный в окне<br>
	Просто закройте окно.
	<input type="button" class="btn" value="Закрыть">
</div>

	<div class="footer"><p>Footer</p></div>

Необходимо показывать окно 1 раз за N дней одному посетителю. Для этого есть следующий вариант

<script src="/catalog/view/javascript/jquery.cookie.js"></script>
<script>
$(document).ready(function(){
$("#setCookie").click(function () {
$.cookie("popup", "", { expires:0, path: '/' });
$("#bg_popup").hide();
});
 
if ( $.cookie("popup") == null )
{
setTimeout(function(){
$("#bg_popup").show();
}, 4000)
}
else { $("#bg_popup").hide();
}
});
</script>

#bg_popup{
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;}
   
#popup {
 background: #FF9800;
    border: 2px solid #795548;
    color: #fff;
    border-radius: 5px;
width: 350px;
margin: 25% auto;
padding: 5px 20px;
position: relative;}
   
.close{
display:block;
position:absolute;
top:5px;
right:5px;
width:20px;
height:20px;
color:#555;
background:#1BA600;
cursor:pointer;}

<div id="bg_popup">
  <div id="popup">
  <a  id="setCookie" class="close" href="#" title="Закрыть" onclick="document.getElementById('bg_popup').style.display='none'; return false;">X</a>
<h1>Пример</h1>
<p>Модальное окно с задержкой в 4 секунды, которое появляется раз в сутки.</p>
</div>
</div>

Отдельно оба варианта работают, но не могу их скрестить. Необходимо чтобы при прокрутке до определённого блока всплывало окно и при закрытии окна оно не показывалось одному пользователю в течении N дней. Мало знаний для решения вопроса. Прошу помощи.

рони · #4 (**permalink**) 29.01.2020, 22:27

Allaur,
строку 13

$('#block').fadeIn(500);

замените на

(function(num, key, fn, duration) {
var ar = JSON.parse(localStorage.getItem(key) || "[]");
var date = new Date;
ar = ar.filter(function(time) {
  return  time > date.getTime()
});
if(ar.length < num) {
   ar.push(date.getTime() + duration);
   localStorage.setItem(key, JSON.stringify(ar));
   fn(ar.length)
}
})(1, 'depository', function(length) {
  $('#block').fadeIn(500);
}, 24 * 60 * 60 * 1000 * 4)

1 раз за 4 дня

Allaur · #5 (**permalink**) 29.01.2020, 23:16

Сообщение от рони

Allaur,
строку 13

$('#block').fadeIn(500);

замените на

Вроде работает.
Покорнейше благодарю.

Форум

Справочник

Discord чат

Курсы javascript