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技巧
Dec 06 Javascript
JS解析XML的实现代码
Nov 12 Javascript
javascript的console.log()用法小结
May 31 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
学习JS中的DOM节点以及操作
Apr 30 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
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
layui表格实现代码
2017/05/20 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
django框架模板语言使用方法详解
2019/07/18 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
大学生演讲稿范文
2014/01/11 职场文书
高中数学教学反思
2014/01/30 职场文书
森林防火宣传标语
2014/06/27 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers