Js read and write cookies to achieve a bottom advertising floating layer effect of two methods
- 2020-03-30 01:09:07
- OfStack
The following case USES js to achieve a page floating layer effect, and USES js to read and write cookies in two ways to realize the user to close the display state of the advertisement;
The reader can copy the following code into an HTML file to try it out. There are two ways to implement the HTML pre tag in js
The reader can copy the following code into an HTML file to try it out. There are two ways to implement the HTML pre tag in 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=" All rights reserved "/>
<title>IT_Blog_ " </title>
</head>
<body>
<div>
Author: IT_Blog_ "
Reprint please indicate the source: <a href= " http://blog.csdn.net/yangkai_hudong " >http://blog.csdn.net/yangkai_hudong</a>
</div>
<br>
<div>
<pre>
1. First: use jQuery the cookie library
The example is currently in use js, The relevant code is as follows:
$(document).ready(function () {
var adCookie=$.cookie("docCookie");
//If there is no cookie locally, the entry cookie is written locally
if(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
}
//If an entry cookie exists locally, the floating layer is not displayed
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//Close the AD and hide the float
$("#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. Second: write your own js operation cookie An instance of the
related js As follows:
$(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();
}
//Read the 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();
}
//If an entry cookie exists locally, the floating layer is not displayed
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//Close the AD and hide the float
$("#closeAd").click(function(){
$("#wapDocCookie").hide();
});
});
</pre>
</div>
<!-- Advertising style -->
<style type="text/css">
body {TEXT-ALIGN: center;}
#wapDocCookie{background-color:rgba(0,0,0,0.7);background:#4b4b4b9;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 -36px9;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 09;height:12px;width:12px;display:block;position:absolute;top:5px;right:10px;}
<!-- advertising 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");
//If there is no cookie locally, the entry cookie is written locally
if(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
}
//If an entry cookie exists locally, the floating layer is not displayed
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//Close the AD and hide the float
$("#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')"> Click on the download </a>
<a title=" Shut down " id="closeAd" href="javascript:void(0)"> </a>
</div>
</body>
</html>