выполнить скрипт только 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, время: 19:49. |