JS使用cookie实现DIV提示框只显示一次的方法
这里运用JavaScript的cookie技术,控制网页上的提示DIV只显示一次,也就是当用户是第一次打开网页的时候才显示,第二次自动隐藏起来,很好的提升了用户体验,不会使用户烦感;利用Cookies,我们还可做超多的事情,慢慢体会吧。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-cookie-div-dlg-show-once-codes/
具体代码如下:
<!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="data:images/close-note.gif" border="0" /></a>
</div>
</div>
</body>
</html>
JS使用cookie实现DIV提示框只显示一次的方法的更多相关文章
- js实现弹出的提示框只弹出一次
<script type="text/javascript"> var ua = navigator.userAgent.toLowerCase(); if (/iph ...
- highCharts提示框不显示的问题
使用HighCharts插件进行数据展示的时候,鼠标放在数据处没有提示框,或者只有头尾2个提示框,其他提示框不显示,为什么会这样? 1.查看是否使用了tooltip属性,该属性的enabled默认为t ...
- 使提示框居中显示&自定义提示框
ToastActivity.java文件: 1 public class ToastActivity extends AppCompatActivity { 2 private Button mbtn ...
- 写入cookie后只显示一次的DIV提示框代码
<script type="text/javascript"> function cookiesave(n, v, mins, dn, path){ if(n) { i ...
- jqury关于cooke的操作写入cookie后只显示一次的DIV提示框代码
有时候当用户登录系统后,需要给用户弹出提示框,但是不需要总是弹出来,在这里加入访问cookie来判断是否弹出过提示框,如果弹出过那么保存cookie,下次根据cookie是否存在来判断是否弹出 < ...
- JS学习笔记 -- 定时器,提示框的应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS类百度的动态提示框思路及完成
参考的代码来自这里: http://www.jb51.net/article/28075.htm 不过说实话,这个网站太烂了,不适合看代码,另外写代码的人是个大牛,但是却没有模块化思想,所以朕不高兴直 ...
- angularjs 怎么获取鼠标焦点 鼠标移入显示浮动的div提示框
首先,我们要清楚几个基础的知识,angular的两个鼠标移入移出的指令------ng-mouseover(鼠标移入)ng-mouseleave(鼠标移出)--------还有就是window.eve ...
- 关于iChartjs在移动端提示框tip显示不正常的解决方法
最近项目需要使用手机图表,但是找了很久都没找到专门为移动端开发的图表,只能找一些能兼容移动端的图表控件,今天就讲讲关于iChartjs这个图形库的一点问题. 问题 iChartjs的提示框tip的显示 ...
随机推荐
- 时间模块(time/date)
在Python中,常用的表示方式的时间有:时间戳,字符串时间,元组时间(既年,月,日,时,分,秒,周几,一年中的第几天,时区) time模块: time.timezone: 获取当前标准时 ...
- OpenWRT介绍
1. 介绍 OpenWRT是一款第三方路由器固件, 其特别在于开放性, 如它的文件系统可写, 用户可在路由器上安装需要的第三方软件.通过刷入OpenWRT, 我们可以完成如下事情 - DLNA共享 - ...
- AWS Ubuntu部署EMQTT的小坑
Redis身份认证中的 is_superuser 表示不查检用户密码和ACL规则 如果是Ubuntu,集群设置节点名须改为:ubuntu@私有Ip,安全组最好相互开放所有端口 如果使用了ELB,EMQ ...
- PL/SQL 10 管理用户子程序
--查看存储过程源代码IKKI@ test10g> select text from user_source where name='ADD_DEPT'; TEXT--------------- ...
- Oracle基础 05 联机日志 redolog
--两个相关视图v$logv$logfile alter system switch logfile; --强制日志切换alter system checkpoint; --强制检查点 - ...
- [ Openstack ] Openstack-Mitaka 高可用之 Rabbitmq-server 集群部署
目录 Openstack-Mitaka 高可用之 概述 Openstack-Mitaka 高可用之 环境初始化 Openstack-Mitaka 高可用之 Mariadb-Galera集群 ...
- niceScroll在ie11和edge浏览器上面滚动时抖动问题
niceScroll 是一个很好的jquery插件,相信很多人都用过,我们项目中使用的是3.7.6版本的,一般我们在开发的时候都是使用的火狐或者是谷歌浏览器,使用 niceScroll 没有什么问题, ...
- HDU-5451
Best Solver Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 65535/102400 K (Java/Others)Tota ...
- docker从零开始网络(三) overly(覆盖)网络
使用overly网络 该overlay网络驱动程序会创建多个docker进程主机之间的分布式网络.该网络位于(覆盖)特定于主机的网络之上,允许连接到它的容器(包括群集服务容器)安全地进行通信.Dock ...
- Mysql错误:Every derived table must have its own alias
Mysql报错:Every derived table must have its own alias <缺少一个别名> 在子查询中经常会犯的错误 .这个别名其实没啥用途.... ...