隐藏 div 24hr cookie javascript？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10674611/
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
Hide div 24hr cookie javascript?
提问by Computerguy
I would like a simple JavaScript code that will allow me to hide a certain div element when clicked for a predefined amount of time. To be a little more informative, I have a suggestions box that appears when the home page is loaded. What I would like is when the div close button is clicked it sets a cookie to keep the box div closed for 24 hours (1day). Simply said, when the div close button is pressed, the box div is hidden for 24 hours. Note: I have a javascript that allows the close button to close the box but it will load every refresh.
我想要一个简单的 JavaScript 代码，它允许我在点击预定的时间量时隐藏某个 div 元素。为了提供更多信息，我在加载主页时会出现一个建议框。我想要的是当点击 div 关闭按钮时，它会设置一个 cookie 以保持框 div 关闭 24 小时（1 天）。简单的说，当div关闭按钮被按下时，盒子div隐藏24小时。注意：我有一个 javascript 允许关闭按钮关闭框，但它会加载每次刷新。
回答by Koen Peters
Although T.J. Crowder is right in his comment that stackoverflow is not here for writing your code... I wrote some code for you. Here's a solution using jQuery. In it you'd use a <div id="popupDiv">...</div>for the message and a link in it with id "close" to close the div.
尽管 TJ Crowder 在他的评论中是正确的，stackoverflow 不是用来编写您的代码的……我为您编写了一些代码。这是使用 jQuery 的解决方案。在其中，您将使用 a<div id="popupDiv">...</div>作为消息，并在其中使用 id 为“close”的链接来关闭 div。
$(document).ready(function() {
// If the 'hide cookie is not set we show the message
if (!readCookie('hide')) {
$('#popupDiv').show();
}
// Add the event that closes the popup and sets the cookie that tells us to
// not show it again until one day has passed.
$('#close').click(function() {
$('#popupDiv').hide();
createCookie('hide', true, 1)
return false;
});
});
// ---
// And some generic cookie logic
// ---
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
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,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
Here's a js fiddle: http://jsfiddle.net/FcFW2/1/. Run once and then run again. The second time the popup does not show.
这是一个 js 小提琴：http: //jsfiddle.net/FcFW2/1/。运行一次，然后再次运行。第二次弹出不显示。
回答by jbabey
this should get you started: http://www.quirksmode.org/js/cookies.html
这应该让你开始：http: //www.quirksmode.org/js/cookies.html
the following examples use the functions declared in the above link.
以下示例使用上述链接中声明的函数。
creating a cookie:
创建一个cookie：
// when the div is clicked
createCookie('hideSuggestionBox', 'true', 1);
reading a cookie:
读取 cookie：
// when deciding whether to show or hide the div (probably on document ready)
if (readCookie('hideSuggestionBox') === 'true') {
// do not show the box, the cookie is there
} else {
// the cookie was not found or is expired, show the box
}
