js读写cookie实现一个底部广告浮层效果的两种方法


Posted in Javascript onDecember 29, 2013

下面一个案例使用js实现一个页面浮层效果,并且通过两种方法使用js读写cookie来实现用户关闭广告的显示状态;

读者可以将下面代码复制到一个html文件试试效果;html的pre标签未两种js实现的方式

<!DOCTYPE HTML> 
<html> 
<head> 
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/> 
<meta content="杨凯" name="description"/> 
<meta name="author" content="http://blog.csdn.net/tianyazaiheruan"/> 
<meta name="copyright" content="杨凯版权所有"/> 
<title>IT_Blog_杨凯</title> 
</head> 
<body> 
<div> 
本文作者:IT_Blog_杨凯 
转载请指明出处:<a href=”http://blog.csdn.net/yangkai_hudong”>http://blog.csdn.net/yangkai_hudong</a> 
</div> 
<br> 
<div> 
<pre> 
1.第一种:使用jQuery的cookie库 
例子就是现在正在使用的js,相关代码如下: 
$(document).ready(function () { 
var adCookie=$.cookie("docCookie"); 
//如果本地没有cookie,将词条cookie写入本地 
if(adCookie!="adDocCookie"){ 
$("#wapDocCookie").show(); 
} 
//如果本地存在词条cookie,不显示浮层 
if(adCookie=="adDocCookie"){ 
$("#wapDocCookie").hide(); 
} 
//关闭广告,隐藏浮层 
$("#closeAd").click(function(){ 
$("#wapDocCookie").hide(); 
$.cookie("docCookie","adDocCookie",{expires:60}); 
}); }); 
//jQuery cookie library 
jQuery.cookie = function(name, value, options) { 
if (typeof value != 'undefined') { // name and value given, set cookie 
options = options || {}; 
if (value === null) { 
value = ''; 
options.expires = -1; 
} 
var expires = ''; 
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { 
var date; 
if (typeof options.expires == 'number') { 
date = new Date(); 
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); 
} else { 
date = options.expires; 
} 
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE 
} 
var path = options.path ? '; path=' + (options.path) : ''; 
var domain = options.domain ? '; domain=' + (options.domain) : ''; 
var secure = options.secure ? '; secure' : ''; 
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); 
} else { // only name given, get cookie 
var cookieValue = null; 
if (document.cookie && document.cookie != '') { 
var cookies = document.cookie.split(';'); 
for (var i = 0; i < cookies.length; i++) { 
var cookie = jQuery.trim(cookies[i]); 
// Does this cookie string begin with the name we want? 
if (cookie.substring(0, name.length + 1) == (name + '=')) { 
cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
break; 
} 
} 
} 
return cookieValue; 
} 
}; 
2.第二种:自己写一个js操作cookie的实例 
相关js如下: 
$(document).ready(function() { 
function writeCookie(name,value) 
{ 
var exp = new Date(); 
exp.setTime(exp.getTime() + 7*24*60*60*1000); 
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 
//读取cookies 
function readCookie(name) 
{ 
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); 
if(arr=document.cookie.match(reg)){ 
return unescape(arr[2]); 
}else { 
return null; 
} 
} 
var adCookie = readCookie("adCookie"); 
if(adCookie!="adDocCookie"){ 
$("#wapDocCookie").show(); 
} 
//如果本地存在词条cookie,不显示浮层 
if(adCookie=="adDocCookie"){ 
$("#wapDocCookie").hide(); 
} 
//关闭广告,隐藏浮层 
$("#closeAd").click(function(){ 
$("#wapDocCookie").hide(); 
}); 
}); 
</pre> 
</div> 
<!--广告样式 --> 
<style type="text/css"> 
body {TEXT-ALIGN: center;} 
#wapDocCookie{background-color:rgba(0,0,0,0.7);background:#4b4b4b\9;width:100%;text-align:center;position:fixed;padding:10px 0 5px 0;bottom:0;left:0;} 
#bkguancha{background:url(http://static.hudong.com/35/86/26100000006141138683868789461.png) no-repeat;background-size:280px;background:url(http://static.hudong.com/50/69/26100000006141138683695381873.png) no-repeat 0 -36px\9;height:46px;width:290px;display:inline-block;overflow:hidden;line-height:99em;} 
#closeAd{background:url(http://static.hudong.com/54/88/26100000006141138683883031718.png) no-repeat ;background-size:12px;background:url(http://static.hudong.com/50/69/26100000006141138683695381873.png) no-repeat -278px 0\9;height:12px;width:12px;display:block;position:absolute;top:5px;right:10px;} 
<!--广告js --> 
</style> 
<script type="text/javascript" src="http://www.huimg.cn/lib/jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
var adCookie=$.cookie("docCookie"); 
//如果本地没有cookie,将词条cookie写入本地 
if(adCookie!="adDocCookie"){ 
$("#wapDocCookie").show(); 
} 
//如果本地存在词条cookie,不显示浮层 
if(adCookie=="adDocCookie"){ 
$("#wapDocCookie").hide(); 
} 
//关闭广告,隐藏浮层 
$("#closeAd").click(function(){ 
$("#wapDocCookie").hide(); 
$.cookie("docCookie","adDocCookie",{expires:60}); 
}); 
}); 
//jQuery cookie library 
jQuery.cookie = function(name, value, options) { 
if (typeof value != 'undefined') { // name and value given, set cookie 
options = options || {}; 
if (value === null) { 
value = ''; 
options.expires = -1; 
} 
var expires = ''; 
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { 
var date; 
if (typeof options.expires == 'number') { 
date = new Date(); 
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); 
} else { 
date = options.expires; 
} 
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE 
} 
var path = options.path ? '; path=' + (options.path) : ''; 
var domain = options.domain ? '; domain=' + (options.domain) : ''; 
var secure = options.secure ? '; secure' : ''; 
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); 
} else { // only name given, get cookie 
var cookieValue = null; 
if (document.cookie && document.cookie != '') { 
var cookies = document.cookie.split(';'); 
for (var i = 0; i < cookies.length; i++) { 
var cookie = jQuery.trim(cookies[i]); 
// Does this cookie string begin with the name we want? 
if (cookie.substring(0, name.length + 1) == (name + '=')) { 
cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
break; 
} 
} 
} 
return cookieValue; 
} 
}; 
</script> 
<div id="wapDocCookie" style="display: none;"> 
<a id="bkguancha" href="http://www.baike.com/api.php?m=guancha&a=download" onclick="StatVirtualTraffic(document.referrer,window.location,'stat_hdstat_onclick_survey_wap_doc_foot_download')">点击下载</a> 
<a title="关闭" id="closeAd" href="javascript:void(0)"> </a> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
node后端服务保活的实现
Nov 10 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 #Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 #Javascript
javascript中不等于的代码是什么怎么写
Dec 29 #Javascript
jquery中的on方法使用介绍
Dec 29 #Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 #Javascript
js data日期初始化的5种方法
Dec 29 #Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 #Javascript
You might like
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
JS控制表格隔行变色
2006/06/26 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
Python返回数组/List长度的实例
2018/06/23 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
Django中提示消息messages的设置方式
2019/11/15 Python
python中count函数简单用法
2020/01/05 Python
CSS3 实现的加载动画
2020/12/07 HTML / CSS
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
strstr()的简单实现
2013/09/26 面试题
机电专业毕业生推荐信
2013/11/10 职场文书
教师的实习鉴定
2013/12/15 职场文书
主持稿开场白
2015/06/01 职场文书
小平您好观后感
2015/06/09 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
利用Redis实现点赞功能的示例代码
2022/06/28 Redis