Question

我的代码运行良好：

$(document).ready(function(){
setTimeout(function(){ $('.welcomemessage').slideToggle('slow');
},1000);
setTimeout(function(){ $('.welcomemessage').hide('slow');
},20000);  

setTimeout(function() {
$(".td-page-wrap").animate({
        marginTop: "800px",
    }, 750);
},1000);  
setTimeout(function() {
$(".td-page-wrap").animate({
        marginTop: "0px",
    }, 750);
},20000);   

$('.closewelcomemessage').click(function(){
$(".welcomemessage").hide();
$(".td-page-wrap").animate({
        marginTop: "0px",
    }, 750);
});
});

我想每次访问只显示一次这个动画。我试图添加一个cookie，没有任何成功。我该怎么办？

编辑：我终于需要它在七天后过期，没有任何滑动过期。有没有办法做到这一点？

Answer 1

您需要cookie plugin

已在此答案中解释：

https://stackoverflow.com/a/1599367/3391783

Answer 2

如果support的级别足以满足您的需求，我会选择LocalStorage。

您可以将代码包装在函数中。然后，当用户进入您的页面时，只需检查存储中是否有项目。如果没有，请调用该功能并设置项目。

对于实验，您可以使用自定义时间戳。将项目的值设置为当前日期（以毫秒为单位）。然后你可以检查它是否超过七天前设置。

像这样：

$(document).ready(function () {

    if (typeof (Storage) !== "undefined") {

        // get the current date
        var dateSevenDaysAgo = new Date();
        // decrease 7 days from the current date, so it will repesent the date 7 days ago
        dateSevenDaysAgo.setDate(dateSevenDaysAgo.getDate() - 7);
        // get the excperiationDate item from localStorage
        var expirationDate = localStorage.getItem("expirationDate");

        // check if the excperiationDate item doesn't excist
        // OR if it has been set more than 7 days ago
        if (!expirationDate || expirationDate < dateSevenDaysAgo.getTime()) {
            // notice that getTime stores the date in milliseconds after/before January 1, 1970
            localStorage.setItem("expirationDate", new Date().getTime());
            showWelcomeMessage();
        }

    } else {
        // LocalStorage is not supported in users browser
    }

    function showWelcomeMessage() {
        setTimeout(function () {
            $('.welcomemessage').slideToggle('slow');
        }, 1000);
        setTimeout(function () {
            $('.welcomemessage').hide('slow');
        }, 20000);

        setTimeout(function () {
            $(".td-page-wrap").animate({
                marginTop: "800px"
            }, 750);
        }, 1000);
        setTimeout(function () {
            $(".td-page-wrap").animate({
                marginTop: "0px"
            }, 750);
        }, 20000);

        $('.closewelcomemessage').click(function () {
            $(".welcomemessage").hide();
            $(".td-page-wrap").animate({
                marginTop: "0px"
            }, 750);
        });
    }

});

每marginTop: Xpx后你还有一些额外的逗号。我删除了那些。

编辑：更新了符合新要求（到期日期）的答案。

使用cookie只显示一次div

2 个答案: