Javascript 每小时仅显示一次div内容

是否可以每小时仅向访问者显示一次页面标题中的div

---

我想展示一个酒吧，向游客展示我们是开着还是关着。“访问者A”应该在他加载的每一个第一页上看到它，而在下一页上不会看到它。30分钟后，应该会再次给他看

我正在我的网站上运行jQuery1.10.2

---

谢谢你的想法

假设你的div有

id=“specialContent”

，类似这样的东西（在文档加载后，在你的

$（文档）中）。ready（function（）{…}；

或任何地方）应该可以做到这一点

function showSpecialContent() {
    $('#specialContent').show();
    setTimeout(hideSpecialContent, 1000*30); // show the content for 30 seconds, then hide it
    document.cookie = "lastshown=" + Date.now();
}

function hideSpecialContent() {
   $('#specialContent').hide();
   setTimeout(showSpecialContent, 1000*60*60); // hide the content, and then show it again in an hour
}

function initTimers() { 
    var lastShown = getCookie("lastshown");
    if(lastShown) {
        var lsd = new Date(new Number(lastShown));

        var timeShownDelta = Date.now() - lsd;
        // if we last showed the div more than an hour ago
        if (timeShownDelta > 60*60*1000) {   
            showSpecialContent();
        } else {
            setTimeout(showSpecialContent, 1000*60*60 - timeShownDelta); 
        }

    } else {
        showSpecialContent();
    }
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length,c.length);
    }
    return "";
}

initTimers();

函数showSpecialContent（）{
$（“#特殊内容”）.show（）；
setTimeout（hideSpecialContent，1000*30）；//显示内容30秒，然后隐藏
document.cookie=“lastShowed=“+Date.now（）；
}
函数hideSpecialContent（）{
$（“#特殊内容”）.hide（）；
setTimeout（showSpecialContent，1000*60*60）；//隐藏内容，然后在一小时内再次显示
}
函数initTimers（）{
var lastshighed=getCookie（“lastshighed”）；
如果（最后显示）{
var lsd=新日期（新编号（最后显示））；
var timeShownDelta=Date.now（）-lsd；
//如果我们最后一次在一个多小时前给大家看
如果（timeShownDelta>60*60*1000）{
showSpecialContent（）；
}否则{
设置超时（显示特殊内容，1000*60*60-时间显示超时）；
}
}否则{
showSpecialContent（）；
}
}
函数getCookie（cname）{
变量名称=cname+“=”；
var ca=document.cookie.split（“；”）；
对于（var i=0；i您可以这样做：

小提琴：

您可以使用cookie，设置一个持续一小时的cookie，然后使用代码进行一些检查：


如果cookie不存在，则显示
div
，创建cookie并使其持续一小时
如果cooie确实存在，则什么也不做


我不认为你可以直接用jQuery来处理cookies，尽管有一些插件，或者你可以使用服务器端编程语言，比如PHP

这取决于你想显示什么。如果只是一个广告或提醒（例如：看看我们的圣诞节促销），那么你可以每小时显示一次。在jQuery脚本中，检查时间，如果是“整”小时（不知道怎么说）例如7:00、8:00或其他，显示
div
，然后在一分钟后隐藏它

PHP示例


重新加载页面时，cookie将存在，因此不会显示
div
。一小时后，cookie将被删除，因此用户下次刷新页面时将显示cookie，并再次设置cookie

服务器端解决方案的缺点是，除非用户在一小时后刷新页面，否则它不会像Javascript那样在一小时后显示出来

编辑您必须在输出任何HTML之前设置cookie，否则它将失败！请确保设置cookie的指令位于代码中任何HTML之前。
我尝试了您的设置，但无论是在我的网站上还是在JSFIDLE.net上都无效。div没有在30秒内消失，下一次加载时会显示出来再次。@sidlo check out div在代码执行时立即出现，5秒后消失，5秒后再次出现。您可能还需要签出setInterval，它与setTimeout不同，将每x毫秒执行一次。setTimeout将在超时后仅执行一次。@sidlo，啊哈，您还希望该小时在整个过程中保持不变吗页面加载。cookies！是的，这正是我想要的。你有任何代码样本吗？将setInterval与非阻塞代码一起使用通常不是一个好主意。在你的示例中，因为延迟<间隔，这没关系；但是async+setInterval=可怕我想显示一个条，向访问者显示我们是打开的还是关闭的。访问者a应该看到它在每一个第一页，他都会加载，下一页则不会。30分钟后，它应该会再次显示给访问者A。我猜这是cookie的作品，但我对它不太了解。你有样本吗？看起来cookie是合适的，你能用像PHP这样的服务器端语言吗？我可以给你一个例子，或者你只需要使用javasc吗cript/jQuery？那太好了。我不介意php。我会采取更简单的解决方案：）我编辑了我的帖子以包含一段代码！div

的

echo

可以替换为其他内容（例如：添加类或其他内容），我只是举个例子。谢谢，这很简单，为什么我没有在互联网上找到答案？：）服务器端解决方案的缺点对我来说很好。请告诉我。它会比javascript解决方案更慢页面加载时间吗？

<div id='showOnceAnHour' style='display: none'>
    Something to show  
</div>

$(document).ready(function() {
    setInterval(function() {
        $("#showOnceAnHour").fadeIn().delay(10000).fadeOut();
    }, 60*60*1000);
});

<?php 
    if(!isset($_COOKIE['yourCookie']))
    {
        //Set the cookie
        setcookie("yourCookie", "open", time() + 3600); //Expires in an hour            
        echo '<div class="open">We are open!</div>';            
    }
?>