<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商城广告demo cookie</title>
<style>
*{padding: 0px;margin: 0px}
body{background: #cccccc}
.advert_box{width: 600px;height: 320px;position: fixed;left: 50%;top: 50%;margin-left: -300px;margin-top:-160px;z-index: 1000}
.advert_box .advert_pic>a{display: block}
.advert_box .advert_close{background: url("http://www.jsdaima.com/Upload/1458539516/close.png") no-repeat scroll 0 0;cursor: pointer; height: 32px;overflow: hidden;position: absolute; right: 0;top: 0;width: 32px;}
.overlay{width: 100%;height: 100%;background:rgba(0,0,0,0.5);position: absolute;left:0px;top: 0px;z-index: 999}
</style>
</head>
<body>
<div class="advert_box" id="advert_box">
<div class="advert_pic">
<a target="_blank" href="https://www.baidu.com">
<img src="../image/pic.png" alt="">
</a>
</div>
<span class="advert_close"></span>
</div>
<div class="overlay" id="overlay"></div>
</body>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
// 总结
// 1.date 对象的方法
// 1>getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
// 2>setTime() 方法以毫秒设置 Date 对象,(Thu Mar 22 2012 16:11:22 GMT+0800 (中国标准时间)
// 3>setHours 和 getHours() 区别在于 set获取的是毫秒 而get获取的是时间数。
// 2.escape 的方法（只针对于字符串用，当对URL进行编码的时候是要用的uncode）
// escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。
// 在存储中使用escape()进行编码的原因
// 每个cookie都是一个键/值对，可以把下面这样一个字符串赋值给document.cookie：
// document.cookie="userId=828";
// 如果要一次存储多个名/值对，可以使用分号加空格（; ）隔开，例如：
// document.cookie="userId=828; userName=hulk";
// 在cookie的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。在cookie的名中做
// 到这点很容易，但要保存的值是不确定的。如何来存储这些值呢？方法是用escape()函数进行编码 ，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，从而可以存储于
// cookie值中，而且使用此种方案还可以避免中文乱码的出现。例如：
// document.cookie="str="+escape("I love ajax");
// 相当于：
// document.cookie="str=I%20love%20ajax";
// 当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。
// 3.toGMTString() 方法可根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果。
$(function () {
function fn() {
var is_first=getCookie("is_first");
if(is_first !=1){
showAdvert();
var time = getTodayOtherTime();
$('.advert_close').on('click',function () {
hideAdvert();
setCookie("is_first",1,time);
});
}else {
hideAdvert();
}
}
fn();
});
// 设置cookie
function setCookie(name,value,time) { //键值和时间
var exp=new Date();
exp.setTime(exp.getTime()+time*1000); //设置时间
// escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。
// toGMTString() 方法可根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果。
// Expires 过期时间
document.cookie=name+'='+escape(value)+';expires='+exp.toGMTString();
}
// 获取cookie
function getCookie(name) {
var arr=document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if(arr !==null){
return unescape(arr[2]);
}
return null
}
// 删除cookie
function delCookie(name) {
var exp=new Date();
exp.setTime(exp.getTime()-1);
// 只需要把失效日期改成比现在日期早一点（这里是早 1 毫秒），再用同样的方法设定 Cookie，就可以删掉 Cookie 了
var cval=getCookie(name);
if(cval!=null){
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
//当然也可以写成
// setCookie(name,'',-1);
}
// 广告隐藏
function hideAdvert() {
$('.advert_box').hide();
$('.overlay').hide();
}
// 广告显示
function showAdvert() {
$('.advert_box').show();
$('.overlay').show();
}
//从当前时间到明日0点的时间戳
function getTodayOtherTime() {
var today = new Date();
today.setHours(0);
today.setMinutes(0);
today.setSeconds(0);
today.setMilliseconds(0);
//明日0点时间戳
var tomorrow_0 = today.getTime() / 1000 + (24 * 3600);
var current_time = Math.round(new Date().getTime() / 1000);
var expire = tomorrow_0 - current_time;
return expire;
}
</script>
</html>当然也可以写成对象的形式。
var cookie = {
set: function (name, value, time) {
var exp=new Date();
exp.setTime(exp.getTime()+time*1000); //设置时间
document.cookie=name+'='+escape(value)+';expires='+exp.toGMTString();
},
get: function (name) {
var arr=document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if(arr !==null){
return unescape(arr[2]);
}
return null
},
del: function (name) {
var exp=new Date();
exp.setTime(exp.getTime()-1);
var cval=getCookie(name);
if(cval!=null){
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
}
};使用的方式:
例如：var name = cookie.get(‘is_first’) ||” “;
相关图片：
关于链接：关于编码
1299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
