Le cas suivant utilise js pour implémenter un effet de couche flottante de page et utilise js pour lire et écrire des cookies via deux méthodes afin d'obtenir l'état d'affichage de l'utilisateur en désactivant la publicité ;
Les lecteurs peuvent copier le code suivant dans un fichier HTML pour essayer l'effet : la balise pre de HTML a deux méthodes d'implémentation js.
Copiez le code comme suit :
<!DOCTYPE HTML>
<html>
<tête>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
<meta content="Yang Kai" name="description"/>
<meta name="auteur" content="http://blog.csdn.net/tianyazaiheruan"/>
<meta name="copyright" content="Copyright de Yang Kai"/>
<title>IT_Blog_Yang Kai</title>
</tête>
<corps>
<div>
Auteur de cet article : IT_Blog_Yang Kai
Veuillez indiquer la source lors de la réimpression : <a href=”http://blog.csdn.net/yangkai_hudong”>http://blog.csdn.net/yangkai_hudong</a>
</div>
<br>
<div>
<pré>
1. La première : utiliser la bibliothèque de cookies de jQuery
L'exemple est le js actuellement utilisé. Le code pertinent est le suivant :
$(document).ready(function () {
var adCookie=$.cookie("docCookie");
//S'il n'y a pas de cookie localement, écrivez le cookie d'entrée localement
si(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
}
//Si le cookie d'entrée existe localement, la couche flottante ne sera pas affichée.
si(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//Ferme la publicité et cache le calque flottant
$("#closeAd").click(function(){
$("#wapDocCookie").hide();
$.cookie("docCookie","adDocCookie",{expires:60});
});
});
//Bibliothèque de cookies jQuery
jQuery.cookie = fonction (nom, valeur, options) {
if (typeof value != 'undefined') { // nom et valeur donnés, définir le cookie
options = options || {};
si (valeur === null) {
valeur = '';
options.expires = -1 ;
}
var expire = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
date variable ;
if (type d'options.expires == 'numéro') {
date = nouvelle Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} autre {
date = options.expires ;
}
expires = '; expires=' + date.toUTCString(); // utilise l'attribut expire, max-age n'est pas pris en charge par IE
}
var chemin = options.chemin ?; chemin=' + (options.chemin) : '';
var domaine = options.domaine '; domaine=' + (options.domaine) : '';
var secure = options.secure '; sécurisé' : '';
document.cookie = [nom, '=', encodeURIComponent(value), expire, chemin, domaine, sécurisé].join('');
} else { // seul le nom donné, récupère le cookie
var cookieValue = null ;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
pour (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Cette chaîne de cookie commence-t-elle par le nom souhaité ?
if (cookie.substring(0, nom.longueur + 1) == (nom + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
casser;
}
}
}
renvoyer la valeur du cookie ;
}
} ;
2. Le deuxième type : écrivez vous-même un exemple js de fonctionnement des cookies
Le js pertinent est le suivant :
$(document).ready(function() {
fonction writeCookie (nom, valeur)
{
var exp = nouvelle Date();
exp.setTime(exp.getTime() + 7*24*60*60*1000);
document.cookie = nom + "="+ escape (valeur) + ";expires=" + exp.toGMTString();
}
//Lire les cookies
fonction readCookie(nom)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
si(arr=document.cookie.match(reg)){
return unescape(arr[2]);
}autre {
renvoie null ;
}
}
var adCookie = readCookie("adCookie");
si(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
}
//Si le cookie d'entrée existe localement, la couche flottante ne sera pas affichée.
si(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//Ferme la publicité et cache le calque flottant
$("#closeAd").click(function(){
$("#wapDocCookie").hide();
});
});
</pre>
</div>
<!--Style publicitaire-->
<style type="text/css">
corps {TEXT-ALIGN : centre ;}
#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 ;gauche:0;}
#bkguancha{background:url(http://static.hudong.com/35/86/26100000006141138683868789461.png) pas de répétition;background-size:280px;background:url(http://static.hudong.com/50/69/26100000006141138683695381873.png) pas de répétition 0 -36px/9;hauteur:46px;largeur:290px;affichage:bloc-en-ligne;débordement:caché;hauteur de ligne:99em;}
#closeAd{background:url(http://static.hudong.com/54/88/26100000006141138683883031718.png) sans répétition ;background-size:12px;background:url(http://static.hudong.com/50/69/26100000006141138683695381873.png) no-repeat -278px 0/9 ; hauteur : 12 px ; largeur : 12 px ; affichage : bloc ; position : absolue ; haut : 5 px ; droite : 10 px ;}
<!--Publicité 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");
// S'il n'y a pas de cookie localement, écrivez le cookie d'entrée localement
si(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
}
//Si le cookie d'entrée existe localement, la couche flottante ne sera pas affichée.
si(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//Ferme la publicité et cache le calque flottant
$("#closeAd").click(function(){
$("#wapDocCookie").hide();
$.cookie("docCookie","adDocCookie",{expires:60});
});
});
//Bibliothèque de cookies jQuery
jQuery.cookie = fonction (nom, valeur, options) {
if (typeof value != 'undefined') { // nom et valeur donnés, définir le cookie
options = options || {};
si (valeur === null) {
valeur = '';
options.expires = -1 ;
}
var expire = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
date variable ;
if (type d'options.expires == 'numéro') {
date = nouvelle Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} autre {
date = options.expires ;
}
expires = '; expires=' + date.toUTCString(); // utilise l'attribut expire, max-age n'est pas pris en charge par IE
}
var chemin = options.chemin ?; chemin=' + (options.chemin) : '';
var domaine = options.domaine '; domaine=' + (options.domaine) : '';
var secure = options.secure '; sécurisé' : '';
document.cookie = [nom, '=', encodeURIComponent(value), expire, chemin, domaine, sécurisé].join('');
} else { // seul le nom donné, récupère le cookie
var cookieValue = null ;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
pour (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Cette chaîne de cookie commence-t-elle par le nom souhaité ?
if (cookie.substring(0, nom.longueur + 1) == (nom + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
casser;
}
}
}
renvoyer la valeur du cookie ;
}
} ;
</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')">Cliquez Télécharger</a>
<a id="closeAd" href="javascript:void(0)"> </a>
</div>
</corps>
</html>