尝试在 colorbox 上放置一个计时器，同时放置一个 cookie 并读取它以仅显示一次

Question

您好，感谢您的帮助。

我正在尝试按照标题所说的去做，我已经成功地放置了 cookie，以便浏览器读取它并且每个浏览器只显示一次颜色框弹出窗口 session。但是，当我尝试向代码中添加计时器时，它似乎将 cookie 的确认抛出。

请看一看我为展示和解释所有内容而创建的页面：

http://www.absorbent-spill-kits.co.uk/testing-cookies/cookiepage2.html

如果你关闭弹出窗口，我已经在页面上写下了我遇到的脚本和问题。

Answer 1

这应该可以做到（部分测试）。您的问题可能会从更多示例中受益。

//Check for cookie
if(!$.cookie("colorboxShown")){
    //If no cookie, set a timeout of 3 minutes (1000 milliseconds) * (60 seconds) * (3 minutes)
    setTimeout(function() {
        $.colorbox({ iframe: true, width: "80%", height: "80%", href: "http://www.sitepoint.com" });
    },
    1000*60*3);

    //Your expires will probably work too, this just adds a year to the current date.
    var expires = new Date();
    expires.setFullYear(expires.getFullYear() + 1);
    $.cookie('colorboxShown', true, { expires: expires, path: '/' });
}

编辑：扩展问题

据我了解，您希望计时器在他们访问的任何页面上弹出。

您要做的第一件事是将当前时间存储在 cookie 中。像这样：

    $.cookie('colorboxShown', JSON.stringify({shown: false, started: new Date()}), { expires: expires, path: '/' });

这将存储开始时间，以便我们计算剩余时间以及它是否已显示。

然后需要更改第一部分以处理新的 cookie 格式：

var expires = new Date();
expires.setFullYear(expires.getFullYear() + 1);
var cookie = JSON.parse($.cookie("colorboxShown"))
if(!cookie) {
    cookie = JSON.parse($.cookie('colorboxShown', JSON.stringify({shown: false, started: new Date()}), { expires: expires, path: '/' }));
if(!cookie.shown){

两者都需要更多行，这样我们就不必再次解析 cookie，因此我们不会收到 TypeError。

现在您需要更改超时长度以考虑 cookie 中的时间。

var timeStart = cookie.started;
timeStart.setMinutes(timeStart.getMinutes() + 3);
var timeMil = new Date() - timeStart;

...

},
    timeMil);//1000*60*3);

最后一块是在显示 colorbox 之前检查 cookie，然后在之后设置 cookie。

setTimeout(function() {
    //cookie is already declared. The colorboxShown cookie will be declared so we don't have to check
    cookie = JSON.parse($.cookie("colorboxShown"));
    if(!cookie.shown) {
        $.colorbox({ iframe: true, width: "80%", height: "80%", href: "http://www.sitepoint.com" });
        $.cookie('colorboxShown', JSON.stringify({shown: true, started: cookie.started}), { expires: expires, path: '/' })
    }
},
    timeMil);//1000*60*3);

这种方法有缺点。如果用户在您的网站上打开了多个选项卡，则有可能（尽管不太可能）在两个选项卡中都显示一个弹出窗口。

如果您有任何疑问，或者如果您不知道如何让代码工作，请告诉我。我没有测试过，但逻辑是正确的。

编辑：完整代码：

var minutes = 1;
$.cookie.json = true;
var expires = new Date();
expires.setFullYear(expires.getFullYear() + 1);
var cookie = $.cookie("colorboxShown");
if (!cookie) {
    $.cookie('colorboxShown', {
        shown: false,
        started: new Date()
    }, {
        expires: expires,
        path: '/'
    });
    cookie = $.cookie('colorboxShown');
}
console.log(cookie.shown);
if (!cookie.shown) {
    var timeStart = new Date(cookie.started);
    console.log(cookie.started);
    timeStart.setMinutes(timeStart.getMinutes() + minutes);
    var timeMil = timeStart - new Date();
    console.log(timeMil);
    setTimeout(function () {
        //cookie is already declared. The colorboxShown cookie will be declared so we don't have to check
        cookie = $.cookie("colorboxShown");
        if (!cookie.shown) {
            $.colorbox({
                iframe: true,
                width: "80%",
                height: "80%",
                href: "http://www.sitepoint.com"
            });
            $.cookie('colorboxShown', {
                shown: true,
                started: cookie.started
            }, {
                expires: expires,
                path: '/'
            });
        }
    },
    timeMil); //1000*60*3);
}

尝试在 colorbox 上放置一个计时器，同时放置一个 cookie 并读取它以仅显示一次

Trying to put a timer on colorbox while also placing a cookie & reading it to show only once

javascript

cookies

time

session

jquery