recherche

Maison >interface Web >js tutoriel >JS utilise des cookies pour réaliser la méthode d'affichage de la boîte d'invite DIV uniquement une fois_javascript skills

JS utilise des cookies pour réaliser la méthode d'affichage de la boîte d'invite DIV uniquement une fois_javascript skills

WBOY
WBOYoriginal
2016-05-16 15:33:431289parcourir

L'exemple de cet article décrit comment JS utilise les cookies pour afficher la boîte d'invite DIV une seule fois. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

La technologie des cookies JavaScript est utilisée ici pour contrôler que l'invite DIV sur la page Web ne soit affichée qu'une seule fois, c'est-à-dire qu'elle s'affiche lorsque l'utilisateur ouvre la page Web pour la première fois et est automatiquement masquée la deuxième fois, ce qui améliore grandement l’expérience utilisateur. Cela ne gênera pas les utilisateurs ; nous pouvons faire beaucoup de choses en utilisant les cookies, faisons-en l’expérience lentement.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-cookie-div-dlg-show-once-codes/

Le code spécifique est le suivant : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>cookie，只显示一次的DIV提示框</title>
<style>
.note{height:100px;width:600px;background:url(images/tishi.jpg) #FEFFCF 40px 0px no-repeat;border:#EDCE7B 1px solid;}
.guanbi{float:right;font-size:12px;padding:6px;}
</style>
<script>
function cookiesave(n, v, mins, dn, path)
{
 if(n)
 {
  if(!mins) mins = 365 * 24 * 60;
  if(!path) path = "/";
  var date = new Date();
  date.setTime(date.getTime() + (mins * 60 * 1000));
  var expires = "; expires=" + date.toGMTString();
  if(dn) dn = "domain=" + dn + "; ";
  document.cookie = n + "=" + v + expires + "; " + dn + "path=" + path;
 }
}
function cookieget(n)
{
 var name = n + "=";
 var ca = document.cookie.split(';');
 for(var i=0;i<ca.length;i++) {
  var c = ca[i];
  while (c.charAt(0)==' ') c = c.substring(1,c.length);
  if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
 }
 return "";
}
function closeclick(){
 document.getElementById('note').style.display='none';
 cookiesave('closeclick','closeclick','','','');
}
function clickclose(){
 if(cookieget('closeclick')=='closeclick'){
  document.getElementById('note').style.display='none';
 }else{
  document.getElementById('note').style.display='block';
 }
}
window.onload=clickclose;
</script>
</head>
<body>
<div id="note" class="note" style="display:none;">
 <div><a href="#" onclick="closeclick()" class="guanbi"><img src="images/close-note.gif" border="0" /></a></div>
</div>
</body>
</html>

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Méthode JS pour utiliser des expressions régulières pour supprimer les caractères répétés dans une compétence string_javascriptArticle suivant：Méthode JS pour utiliser des expressions régulières pour supprimer les caractères répétés dans une compétence string_javascript

Articles Liés

Voir plus