выполнить скрипт только N раз в сутки через jQuery Cookie
есть скрипт подключенный ко всем страницам сайта
$('a.open').trigger('click'); т.е при любой загрузки страницы он открывает всплывающее окно с картинкой. хочу сделать чтобы в сутки одному человеку максимум 3 раза показывалась это картинка. т.е надо как то посчитать сколько страниц открыл человек на сайте мол посмотрел 1 страницу счетчик +1 посмотрел вторую еще плюс 1 и еще одну и еще + 1 (i++) ну вы поняли. на php через куки конечно могу написать. но нужно на js чтобы работало. подключен плагин jQuery Cookie подскажите пожалуйста как сделать проще через cookie js ну и раз в сутки чтобы клиенту обнулялись значения просмотров. т.е если человек посмотрел до 3х страниц то 3 раза должен выполниться скрипт $('a.open').trigger('click'); |
localStorage запуск функции определённое количество раз за указанный период
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> |
Здравствуйте
Не стал создавать дубликат темы. Вопрос примерно тот же. Есть всплывающее окно, которое появляется после прокрутки до определённого блока. <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 дней. Мало знаний для решения вопроса. Прошу помощи. |
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 дня |
Цитата:
Покорнейше благодарю. |
Часовой пояс GMT +3, время: 21:04. |