JS uses cookies to realize the method of displaying DIV prompt box only once

JS uses cookies to realize the method of displaying DIV prompt box only once_javascript skills

WBOY

Release： 2016-05-16 15:33:43

Original

1283 people have browsed it

The example in this article describes how JS uses cookies to display the DIV prompt box only once. Share it with everyone for your reference, the details are as follows:

JavaScript cookie technology is used here to control the prompt DIV on the web page to be displayed only once, that is, it is displayed when the user opens the web page for the first time, and is automatically hidden the second time, which greatly improves the user experience. It will not annoy users; we can do a lot of things using Cookies, let’s experience it slowly.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

<!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>

Copy after login

I hope this article will be helpful to everyone in JavaScript programming.