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 dom 基本操作小结
Apr 11 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
js实现异步循环实现代码
Feb 16 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
详解Vue的options
May 15 Vue.js
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
PHP4实际应用经验篇(3)
2006/10/09 PHP
深入php list()函数的详解
2013/06/05 PHP
php解析url的三个示例
2014/01/20 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
PHP递归创建多级目录
2015/11/05 PHP
php-fpm中max_children的配置
2019/03/15 PHP
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
python deque模块简单使用代码实例
2020/03/12 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
Python 远程开关机的方法
2020/11/18 Python
Django 实现图片上传和下载功能
2020/12/31 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
企业消防安全制度
2014/02/02 职场文书
经营理念口号
2014/06/21 职场文书
小学语文复习计划
2015/01/19 职场文书
请客吃饭开场白
2015/06/01 职场文书
六五普法心得体会2016
2016/01/21 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js