Im folgenden Fall wird js verwendet, um einen Seiten-Floating-Layer-Effekt zu implementieren, und js wird verwendet, um Cookies über zwei Methoden zu lesen und zu schreiben, um den Anzeigestatus des Benutzers zu erreichen, der die Werbung ausschaltet.
Leser können den folgenden Code in eine HTML-Datei kopieren, um den Effekt auszuprobieren. Das pre-Tag von HTML verfügt über zwei js-Implementierungsmethoden
Kopieren Sie den Codecode wie folgt:
<!DOCTYPE HTML>
<html>
<Kopf>
<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="Copyright by Yang Kai"/>
<title>IT_Blog_Yang Kai</title>
</head>
<Körper>
<div>
Autor dieses Artikels: IT_Blog_Yang Kai
Bitte geben Sie beim Nachdruck die Quelle an: <a href=“http://blog.csdn.net/yangkai_hudong“>http://blog.csdn.net/yangkai_hudong</a>
</div>
<br>
<div>
<pre>
1. Der erste: Verwendung der Cookie-Bibliothek von jQuery
Das Beispiel ist das derzeit verwendete js. Der relevante Code lautet wie folgt:
$(document).ready(function () {
var adCookie=$.cookie("docCookie");
//Wenn lokal kein Cookie vorhanden ist, schreiben Sie den Eintrag Cookie lokal
if(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
}
//Wenn das Eintragscookie lokal vorhanden ist, wird die schwebende Ebene nicht angezeigt.
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//Werbung schließen und schwebende Ebene ausblenden
$("#closeAd").click(function(){
$("#wapDocCookie").hide();
$.cookie("docCookie","adDocCookie",{expires:60});
});
});
//jQuery-Cookie-Bibliothek
jQuery.cookie = Funktion(Name, Wert, Optionen) {
if (typeof value != 'undefiniert') { // Name und Wert angegeben, Cookie setzen
Optionen = Optionen ||. {};
if (Wert === null) {
Wert = '';
Optionen.expires = -1;
}
var läuft ab = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
Var-Datum;
if (typeof options.expires == 'number') {
Datum = neues Datum();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} anders {
date = Optionen.expires;
}
Expires = '; Expires=' + Date.toUTCString(); // Expires-Attribut verwenden, max-age wird vom IE nicht unterstützt
}
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [Name, '=', encodeURIComponent(value), läuft ab, Pfad, Domäne, sicher].join('');
} else { // Nur Name angegeben, Cookie abrufen
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]);
// Beginnt dieser Cookie-String mit dem gewünschten Namen?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
brechen;
}
}
}
return cookieValue;
}
};
2. Der zweite Typ: Schreiben Sie selbst ein JS-Beispiel für den Betrieb von Cookies
Die relevanten js lauten wie folgt:
$(document).ready(function() {
Funktion writeCookie(name,value)
{
var exp = neues Datum();
exp.setTime(exp.getTime() + 7*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//Lesen Sie Cookies
Funktion readCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)){
return unescape(arr[2]);
}anders {
null zurückgeben;
}
}
var adCookie = readCookie("adCookie");
if(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
}
//Wenn das Eintragscookie lokal vorhanden ist, wird die schwebende Ebene nicht angezeigt.
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//Werbung schließen und schwebende Ebene ausblenden
$("#closeAd").click(function(){
$("#wapDocCookie").hide();
});
});
</pre>
</div>
<!--Werbestil-->
<style type="text/css">
Körper {TEXT-ALIGN: Mitte;}
#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 ;links: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) keine Wiederholung ;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;}
<!--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");
//Wenn lokal kein Cookie vorhanden ist, schreiben Sie den Eintrag Cookie lokal
if(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
}
//Wenn das Eintragscookie lokal vorhanden ist, wird die schwebende Ebene nicht angezeigt.
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//Werbung schließen und schwebende Ebene ausblenden
$("#closeAd").click(function(){
$("#wapDocCookie").hide();
$.cookie("docCookie","adDocCookie",{expires:60});
});
});
//jQuery-Cookie-Bibliothek
jQuery.cookie = Funktion(Name, Wert, Optionen) {
if (typeof value != 'undefiniert') { // Name und Wert angegeben, Cookie setzen
Optionen = Optionen ||. {};
if (Wert === null) {
Wert = '';
Optionen.expires = -1;
}
var läuft ab = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
Var-Datum;
if (typeof options.expires == 'number') {
Datum = neues Datum();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} anders {
date = Optionen.expires;
}
Expires = '; Expires=' + Date.toUTCString(); // Expires-Attribut verwenden, max-age wird vom IE nicht unterstützt
}
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [Name, '=', encodeURIComponent(value), läuft ab, Pfad, Domäne, sicher].join('');
} else { // Nur Name angegeben, Cookie abrufen
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]);
// Beginnt dieser Cookie-String mit dem gewünschten Namen?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
brechen;
}
}
}
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')">Klicken Sie Herunterladen</a>
<a id="closeAd" href="javascript:void(0)"> </a>
</div>
</body>
</html>