仅在首次访问时显示div（Cookie？） [英] Have div display ONLY on first time visit (cookies?)
问题描述
我尝试在用户第一次访问我的网站时显示div。我很确定我这样做使用cookies，我有有限的经验，我有一个很难理解。我在网上找到的大多数教程只谈到有cookie提示用户输入类似名称的东西，并让它以后回忆，这不是我想要的。我只想让cookie检查用户是否已经访问我的网站，如果没有，显示通常被隐藏的div。
这里是我试过的
HTML：
<头>
< script type =text / javascriptsrc =annoy.js>< / script>
< script type =text / javascriptsrc =scripts.js>< / script>
< / head>
...
< body>
< div id =overbox3>
< div id =infobox3>
< p>这是Cookie框< / p>
< br />
< p>它只应显示一次< / p>
< br />< br />
< / div><！ - end infobox3 - >
< / div> <！ - end overbox3 - >
< / body>
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;
}
scripts.js的相关内容：
function popbox3（）{
$（'＃overbox3'）。
}
我假设的是问题，annoy.js的内容： / p>
function GetCookie（name）{
var arg = name +=;
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while（i
if（document.cookie.substring（i，j）== arg）
returnhere;
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;
}
从我的理解，cookie应该是调用函数popbox3只有当用户没有访问，这将切换隐藏的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;
}
我也设置了cookie无条件，所以每次访问网站都会推送返回到期时间。
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.
Here's something I've tried and failed to get to work.
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):
#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:
function popbox3() {
$('#overbox3').toggle();
}
And what I assume is the problem, the content of 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.
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:
$(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.
这篇关于仅在首次访问时显示div（Cookie？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
