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定义类或函数的几种方式小结
Jan 09 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
Discuz 模板引擎的封装类代码
2008/07/18 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
javascript学习网址备忘
2007/05/29 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
python文件路径操作方法总结
2020/12/21 Python
Farnell德国:电子元器件供应商
2018/07/10 全球购物
什么是接口(Interface)?
2013/02/01 面试题
普师专业个人自荐信范文
2013/11/26 职场文书
英文导游欢迎词
2014/01/11 职场文书
2014年质检工作总结
2014/11/26 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
详解nodejs内置模块
2021/05/06 NodeJs
HTML常用标签超详细整理
2022/03/19 HTML / CSS
分享python函数常见关键字
2022/04/26 Python
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android
 python中的元类metaclass详情
2022/05/30 Python