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 相关文章推荐
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
vue之nextTick全面解析
May 17 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 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
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
总结python中pass的作用
2019/02/27 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
Python列表切片常用操作实例解析
2019/12/16 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
python可迭代对象去重实例
2020/05/15 Python
python类共享变量操作
2020/09/03 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
酒店执行总经理岗位职责
2013/12/15 职场文书
经济管理专业自荐信
2013/12/30 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
工程部岗位职责
2015/02/10 职场文书
Flink 侧流输出源码示例解析
2022/09/23 Servers