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 尚未实现错误解决办法
Nov 27 Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
php ci框架验证码实例分析
2013/06/26 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
PHP使用递归生成文章树
2015/04/21 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
python retrying模块的使用方法详解
2019/09/25 Python
python框架django项目部署相关知识详解
2019/11/04 Python
python实现随机加减法生成器
2020/02/24 Python
keras输出预测值和真实值方式
2020/06/27 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
如何使用Pytorch搭建模型
2020/10/26 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
监理员的岗位职责
2013/11/13 职场文书
个人函授自我鉴定
2014/03/25 职场文书
企业计划生育责任书
2015/05/09 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
nginx七层负载均衡配置详解
2022/07/15 Servers