JS使用cookie实现DIV提示框只显示一次的方法


Posted in Javascript onNovember 05, 2015

本文实例讲述了JS使用cookie实现DIV提示框只显示一次的方法。分享给大家供大家参考,具体如下:

这里运用JavaScript的cookie技术,控制网页上的提示DIV只显示一次,也就是当用户是第一次打开网页的时候才显示,第二次自动隐藏起来,很好的提升了用户体验,不会使用户烦感;利用Cookies,我们还可做超多的事情,慢慢体会吧。

运行效果截图如下:

JS使用cookie实现DIV提示框只显示一次的方法

在线演示地址如下:

具体代码如下:

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

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
jquery等待效果示例
May 01 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 #Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 #Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 #Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 #Javascript
如何防止JavaScript自动插入分号
Nov 05 #Javascript
javascript常用函数(2)
Nov 05 #Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 #Javascript
You might like
MVC模式的PHP实现
2006/10/09 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
javascript数据类型详解
2017/02/07 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python执行get提交的方法
2015/04/29 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
Python grpc超时机制代码示例
2020/09/14 Python
如何用Django处理gzip数据流
2021/01/29 Python
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
大学生应聘自荐信
2013/10/11 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
推荐信格式范文
2014/05/09 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
小学中队活动总结
2015/05/11 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
PL350与SW11的比较
2021/04/22 无线电
Django框架中表单的用法
2022/06/10 Python