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 相关文章推荐
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
php实现对象克隆的方法
2015/06/20 PHP
分享php多功能图片处理类
2016/05/15 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
JS继承 笔记
2011/07/13 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python编写登陆接口的方法
2017/07/10 Python
python调试神器PySnooper的使用
2019/07/03 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
办加油卡单位介绍信
2014/01/09 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
演讲比赛策划方案
2014/06/11 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
前台岗位职责范本
2015/04/16 职场文书
培训后的感想
2015/08/07 职场文书
教师节主题班会方案
2015/08/17 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电