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 YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
js图片切换具体实现代码
Oct 13 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 Javascript
ES6 十大特性简介
Dec 09 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
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
python实现数组插入新元素的方法
2015/05/22 Python
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
关于python3中setup.py小概念解析
2019/08/22 Python
Python 使用type来定义类的实现
2019/11/19 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
市政施工员自我鉴定
2014/01/15 职场文书
单位提档介绍信
2014/01/17 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
检讨书范文500字
2015/01/28 职场文书
2015年团支书工作总结
2015/04/03 职场文书
python实现简单的名片管理系统
2021/04/26 Python