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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js读写cookie实现一个底部广告浮层效果的两种方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6208字，纯文字阅读大概需要9分钟。

内容图文

下面一个案例使用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>

内容总结

以上是互联网集市为您收集整理的js读写cookie实现一个底部广告浮层效果的两种方法全部内容，希望文章能够帮你解决js读写cookie实现一个底部广告浮层效果的两种方法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/364030.html

来源：【匿名】

【上一篇】JS 仿腾讯发表微博的效果代码【下一篇】javascript 怎么调用php方法

更多 ►

【js读写cookie实现一个底部广告浮层效果的两种方法】教程文章相关的互联网学习教程文章

javascript删除cookie【代码】

代码很简单function deleteCookie (cookieName) {document.cookie = `${cookieName}=; expires=${new Date(0).toGMTString()}` }上面写了一个deletecookie的方法只要传入cookieName就可以删除，该方法会根据cookie的名称通过设置过期时间来删除。原文：https://www.cnblogs.com/wuxianqiang/p/10048603.html

JS 详解 Cookie、 LocalStorage 与 SessionStorage【代码】

基本概念CookieCookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。localStoragelocalStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是...

js读取cookie信息

1. 第一种方式读取cookie信息：用document.cookie.split(“; “)的方式把字符串分割成几个段，然后遍历整个数组 //javascript方法 function getCookie(name){ 　　var arr = document.cookie.split("; "); 　　for(var i=0,len=arr.length;i<len;i++){ 　　　　var item = arr[i].split("="); 　　　　if(item[0]==name){ 　　　　　　return item[1]; 　　　　} 　　} 　　return ""; }2. 第二中方法为匹配字符串在...

javascript：Cookie【代码】

原文章：https://wangdoc.com/javascript/index.htmlCookie概述Cookie 是服务器保存在浏览器的一小段文本信息，一般大小不能超过4KB。浏览器每次向服务器发出请求，就会自动附上这段信息。Cookie 主要保存状态信息，以下是一些主要用途。对话（session）管理：保存登录、购物车等需要记录的信息。个性化信息：保存用户的偏好，比如网页的字体大小、背景色等等。追踪用户：记录和分析用户行为。Cookie 不是一种理想的客户端储存机制...

JavaScript BOM Cookie 的用法【代码】

JavaScript CookieCookie是计算机上存储在小文本文件中的数据。当Web服务器将网页发送到浏览器时，连接将关闭，服务器将忘记用户的所有内容。发明Cookie是为了解决“如何记住用户信息”的问题：当用户访问网页时，他/她的名字可以存储在cookie中。下次用户访问该页面时，cookie会“记住”他/她的名字。Cookie以键值对形式保存，如：username = John Doe当浏览器从服务器请求网页时，属于该页面的cookie将添加到请求中。这样，服务器...

PHP与JavaScript下的Cookie操作

PHP与JavaScript下的Cookie操作下面的例子列出几种情形交互场景，列出JS和php交互的方法。总结下，以免日后再为cookie问题困扰。setcookie.php<div id="highlighter_878295" "="" style="margin: 8px 0px; width: 712.796875px; font-size: 12px; color: #121c46; padding: 1px !important; border: 0px !important; outline: 0px !important; float: none !important; vertical-align: baseline !important; position: relative ...

JS对Cookie的应用--JavaScript实例集锦（初学）【代码】【图】

一个网站上的cookie信息可以实现下次自动登录，记录你的历史等等可以在火狐浏览器查看本地代码的cookie信息：打开火狐浏览器--点击右键--查看页面信息--安全--查看cookie <!DOCTYPE html><html><head><title>Cookie</title></head><script type="text/javascript">/* var oDate=new Date();oDate.setDate(oDate.getDate()+30);document.cookie="user=blue;expires=";// document.cookie="pass=123";*///alert(document.cookie);...

[转自脚本之家] Javascript cookie 详解

cookie概述在上一节，曾经利用一个不变的框架来存储购物栏数据，而商品显示页面是不断变化的，尽管这样能达到一个模拟全局变量的功能，但并不严谨。例如在导航框架页面内右击，单击快捷菜单中的【刷新】命令，则所有的JavaScript变量都会丢失。因此，要实现严格的跨页面全局变量，这种方式是不行的， JavaScript中的另一个机制：cookie，则可以达到真正全局变量的要求。 cookie是浏览器提供的一种机制，它将document 对象的cook...

JavaScript操作cookie

“cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。” - w3school　cookie 是访问过的网站创建的文件，用于存储浏览信息，例如个人资料信息。从JavaScript的角度看，cookie 就是一些字符串信息。这些信息存放在客户端的计算机中，用于客户端计算机与服务器之间传递信息。在JavaScript中可以通过 document.cookie 来...

JavaScript操作cookie【代码】

封装js操作cookie工具对象cookie.js文件(function () {// cookie工具对象var cookieUtils = {};// cookie数据var data = {};/*** 设置cookie* @param key cookie的名称* @param value cookie的值* @param timeOfDay cookie的有效时长（单位是天）*/cookieUtils.set = function (key, value, timeOfDay) {var date = new Date();date.setTime(date.getTime() + (timeOfDay * 24 * 60 * 60 * 1000));document.cookie = key + "=" + v...

javascript 原生 cookie 处理【代码】

来自网络!function getCookie(name) {var start = document.cookie.indexOf(name + "=");var len = start + name.length + 1;if (( !start ) && ( name != document.cookie.substring(0, name.length) )) {return null;}if (start == -1) return null;var end = document.cookie.indexOf(‘;‘, len);if (end == -1) end = document.cookie.length;return unescape(document.cookie.substring(len, end));}function setCookie(name...

Javascript(JS)对Cookie的读取、删除、写入操作帮助方法【代码】

1var CookieUtils = {2 get: function (name) {3var cookieName = encodeURIComponent(name) + ‘=‘,4 cookieStart = document.cookie.indexOf(cookieName),5 cookieValue = null;6if (cookieStart > -1) {7var cookieEnd = document.cookie.indexOf(‘;‘, cookieStart);8if (cookieEnd == -1) {9 cookieEnd = document.cookie.length; 10 } 11 cookieValue...

javascript-Cookie的应用【代码】

在我平时开发网页的过程中，可能涉及到浏览器本地的存储，现在主流的浏览器存储方式有：cookie，直接读取xml，userData，H5 的LocalStorage等，Cookie存储数据有限，但对于数据量不大的时候操作还是比较方便的，今天我们先介绍一下cookie的使用，以及我后面简单封装一个cookie操作的单例，便于实现cookie的设置，获取，删除的方法。Cookie操作代码--下面这个例子主要是实现在网页打开的时候弹出一个提示框，但第二次以后刷新网页不...

漫谈JavaScript中的cookie【代码】【图】

什么是cookie？简单来说，cookie就是网站服务器存放在我们计算机上的一小段（一般大小不超过4KB）用来识别和记录用户的个人信息的文本。HTTP协议是一种没有“状态”的传输协议，也就是说，服务器无法识别任意两次访问是否有同一个来源，这样就不能判断用户信息，从而也就不能针对特定用户做出个性化设置。为了解决这个问题，cookie技术应运而生。cookie具体是怎么运行的呢？举个栗子，当我们在网页上登录了一次邮箱后，下一次再登录...

JS设置cookie，删除cookie【代码】【图】

第一种：（这个是w3c官网的代码）<script> //设置cookie function setCookie(cname, cvalue, exdays) {var d = new Date();d.setTime(d.getTime() + (exdays*24*60*60*1000));var expires = "expires="+d.toUTCString();document.cookie = cname + "=" + cvalue + "; " + expires; } //获取cookie function getCookie(cname) {var name = cname + "=";var ca = document.cookie.split(‘;‘);for(var i=0; i<ca.length; i++) {var ...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【js读写cookie实现一个底部广告浮层效果的两种方法】教程文章相关的互联网学习教程文章

IE - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程