javascript 仅在第一次访问时显示 div（cookies？）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18904697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Have div display ONLY on first time visit (cookies?)
提问by damon
I'm trying to have a div display on the very first time a user visits my site. I'm pretty sure I do this by using cookies, which I have limited experience with and am have a hard time understanding. Most tutorials I've found online only talk about having cookies prompt a user to input something like a name, and have it recall it later, which not what I want at all. I simply want the cookie to check if the user has been to my site before, and if not, display a div that is normally hidden.
我试图在用户第一次访问我的网站时显示 div。我很确定我是通过使用 cookie 来做到这一点的，我对此的经验有限并且很难理解。我在网上找到的大多数教程都只讨论让 cookie 提示用户输入诸如名称之类的东西，然后让它回忆起来，这根本不是我想要的。我只是想让 cookie 检查用户之前是否访问过我的网站，如果没有，则显示一个通常隐藏的 div。
Here's something I've tried and failed to get to work.
这是我尝试过但未能开始工作的事情。
HTML:
HTML：
<head>
<script type="text/javascript" src="annoy.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
...
<body>
<div id="overbox3">
<div id="infobox3">
<p>This is the cookie box</p>
<br />
<p>it should only show once </p>
<br/><br/>
</div><!-- end infobox3 -->
</div> <!-- end overbox3 -->
</body>
CSS (not really relevant since this works fine):
CSS（不是真正相关，因为这很好用）：
#overbox3 {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(64, 64, 64, 0.5);
z-index: 999999;
display: none;
}
#infobox3 {
margin: auto;
position: absolute;
left: 35%;
top: 20%;
height: 300px;
width: 400px;
background-color: white;
border: 1px solid red;
}
Relevant content of scripts.js:
scripts.js的相关内容：
function popbox3() {
$('#overbox3').toggle();
}
And what I assume is the problem, the content of annoy.js:
我假设是问题， annoy.js 的内容：
function GetCookie(name) {
var arg=name+"=";
var alen=arg.length;
var clen=document.cookie.length;
var i=0;
while (i<clen) {
var j=i+alen;
if (document.cookie.substring(i,j)==arg)
return "here";
i=document.cookie.indexOf(" ",i)+1;
if (i==0)
break;
}
return null;
}
var visit=GetCookie("COOKIE1");
if (visit==null){
var expire=new Date();
popbox3();
expire=new Date(expire.getTime()+7776000000);
document.cookie="COOKIE1=here; expires="+expire;
}
From my understanding, the cookie is supposed to be calling the function popbox3() only if the user has not visited, which would toggle the display of the hidden div. But as of now, nothing is working. Any clarification or help here would be greatly appreciated. Thanks in advance.
根据我的理解，cookie 应该仅在用户未访问时调用函数 popbox3()，这将切换隐藏 div 的显示。但截至目前，没有任何效果。任何澄清或帮助在这里将不胜感激。提前致谢。
回答by Barmar
Your cookie code looks fine. You need to run it in the document ready handler, so that it waits until the document is loaded before toggling the DIV:
您的 cookie 代码看起来不错。您需要在文档就绪处理程序中运行它，以便在切换 DIV 之前等待文档加载完毕：
$(function() {
var visit=GetCookie("COOKIE1");
if (visit==null){
popbox3();
}
var expire=new Date();
expire=new Date(expire.getTime()+7776000000);
document.cookie="COOKIE1=here; expires="+expire;
}
I've also made setting the cookie unconditional, so that every visit to the site will push back the expiration time.
我还无条件地设置了 cookie，这样每次访问该站点都会推迟到期时间。
