The following example uses js to implement a page float layer effect, and uses js to read and write cookies in two ways to enable users to disable the display status of advertisements;
You can copy the following code to an html file to try the effect. The pre-tag of html is not implemented in two js methods.
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta content = "text/html; charset = UTF-8" http-equiv = "Content-Type"/>
<Meta content = "Yang Kai" name = "description"/>
<Meta name = "author" content = "http://blog.csdn.net/tianyazaiheruan"/>
<Meta name = "copyright" content = "Yang Kai copyright"/>
<Title> IT_Blog _ Yang Kai </title>
</Head>
<Body>
<Div>
Author: IT_Blog _ Yang Kai
Reprinted please specify the Source: <a href = "http://blog.csdn.net/yangkai_hudong"> http://blog.csdn.net/yangkai_hudong </a>
</Div>
<Br>
<Div>
<Pre>
1. First: Use the cookie library of jQuery
The sample code is as follows:
$ (Document). ready (function (){
Var adCookie = $. cookie ("docCookie ");
// If no cookie exists locally, write the entry cookie to the local device.
If (adCookie! = "AdDocCookie "){
$ ("# WapDocCookie"). show ();
}
// If the entry cookie exists locally, the floating layer is not displayed.
If (adCookie = "adDocCookie "){
$ ("# WapDocCookie"). hide ();
}
// Close the advertisement and hide the floating layer
$ ("# 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 * 24x60*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. Type 2: write your own js operation cookie instance
Related js:
$ (Document). ready (function (){
Function writeCookie (name, value)
{
Var exp = new Date ();
Exp. setTime (exp. getTime () + 7x24x60*60*1000 );
Document. cookie = name + "=" + escape (value) + "; expires =" + exp. toGMTString ();
}
// Read 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 the entry cookie exists locally, the floating layer is not displayed.
If (adCookie = "adDocCookie "){
$ ("# WapDocCookie"). hide ();
}
// Close the advertisement and hide the floating layer
$ ("# CloseAd"). click (function (){
$ ("# WapDocCookie"). hide ();
});
});
</Pre>
</Div>
<! -- Advertisement style -->
<Style type = "text/css">
Body {TEXT-ALIGN: center ;}
# WapDocCookie {background-color: rgba (0.7, 0, 100%); background: # 4b4b4b \ 9; width:; 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 ;}
<! -- Advertisement 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 no cookie exists locally, write the entry cookie to the local device.
If (adCookie! = "AdDocCookie "){
$ ("# WapDocCookie"). show ();
}
// If the entry cookie exists locally, the floating layer is not displayed.
If (adCookie = "adDocCookie "){
$ ("# WapDocCookie"). hide ();
}
// Close the advertisement and hide the floating layer
$ ("# 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 * 24x60*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 to download </a>
<A title = "close" id = "closeAd" href = "javascript: void (0)"> </a>
</Div>
</Body>
</Html>