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 相关文章推荐
IE本地存储userdata的一个bug说明
Jul 01 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
js微信支付实现代码
Dec 22 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 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函数
2006/10/09 PHP
PHP原理之异常机制深入分析
2010/08/08 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
php标签云的实现代码
2012/10/10 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
jQuery事件用法详解
2016/10/06 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python入门篇之条件、循环
2014/10/17 Python
Python入门篇之正则表达式
2014/10/20 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
对pandas中to_dict的用法详解
2018/06/05 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
Sql面试题
2013/03/20 面试题
网络事业创业计划书范文
2014/01/09 职场文书
2014村务公开实施方案
2014/02/25 职场文书
高中生学习计划书
2014/09/15 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers