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 相关文章推荐
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
微信小程序实现点赞业务
Feb 10 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
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
javascript String 的扩展方法集合
2008/06/01 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
Vue组件化开发思考
2018/02/02 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
文员个人求职自荐信
2013/09/21 职场文书
年会主持词结束语
2014/03/27 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
啦啦队口号大全
2014/06/16 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS