JS使用cookie实现DIV提示框只显示一次的方法

本文实例讲述了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="images/close-note.gif" border="0" /></a>
        </div>
    </div>
</body>
</html>
时间: 2024-11-10 12:16:10

JS使用cookie实现DIV提示框只显示一次的方法的相关文章

js实现弹出的提示框只弹出一次

1 <script type="text/javascript"> 2 var ua = navigator.userAgent.toLowerCase(); 3 if (/iphone|ipad|ipod/.test(ua)) { 4 //alert("iphone"); 5 } else if (/android/.test(ua)) { 6 var alertmessage="温馨提示:您可以在右下角的菜单中下载最新版本的手机版APP哦!

写入cookie后只显示一次的DIV提示框代码

<script type="text/javascript"> 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 = &quo

JS类百度的动态提示框思路及完成

参考的代码来自这里: http://www.jb51.net/article/28075.htm 不过说实话,这个网站太烂了,不适合看代码,另外写代码的人是个大牛,但是却没有模块化思想,所以朕不高兴直接用,索性是周末就花时间写一个吧. 明确一下需求: 需要一个输入框,在用户输入之后(keyup事件),将用户输入返回给外部,并从外部获取提示信息,显示到输入框下方 另外: 1.在失去焦点时,需要消去提示框 2.需要屏蔽浏览器原有的提示功能 3.监听键盘上下键,循环选择提示项 4.当窗口位置变化时,重

echars 图表提示框自定义显示

一 . 显示单条数据时在tooltip里调用formatter函数给自定义提示框内数据. 效果图显示 二 . 当显示多条数据时.为保证和原来的效果相同需要自己实现点的效果.如果不实现,提示框则不限点的效果 效果图显示 如果没实现点的效果那么它就不会显示 原文地址:https://www.cnblogs.com/shink/p/10778296.html

NestedScrollView嵌套ListView时只显示一行的解决方法

在使用CoordinatorLayout和AppBarLayout实现嵌套滑动的时候,出现listview没有嵌套滑动: 如果要实现嵌套滑动,则需要添加NestedScrollView,但是结果发现listview只显示一行数据 <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent"

JS定时器的使用--延时提示框

<title>无标题文档</title> <style> div{float:left;margin:10px;} #div1{width:50px; height:50px; background:red;} #div2{width:200px; height:200px; background:#999;} </style> <script> window.onload=function () { var oDiv1=document.get

下拉框只显示最初下拉框中的值和json返回array的交集

首先我们可以遍历dropdown var array = new Array(); $("#select option").each(function(j){ array[j]=$(this).val(); $("#select option[value="+this.value+"]").remove(); }); 先将下拉框里的值都存到一个array里再move了,然后再和json里的array相比较 for(var i = 0;i<a

Listview或者GridView嵌套在ScrollView中只显示一行item解决方法。

页面里有ListView(GridView)和一些固定布局让他们一起在整个屏幕上滚动方法: (1)自定义ListView(GridView),重写onMeasure()方法,我以GridView为例(ListView只需要extends ListView)具体代码如下: package top.ant.view; import android.content.Context; import android.util.AttributeSet; import android.widget.Grid

LNMP下wordpress无法切换主题,只显示当前主题解决方法

最近在lnmp下发现wordpress后台无法切换主题,只能显示当前主题,开始还以为是文件没传完,又重置了一遍,还是一样.百度得知,原来军哥的LNMP安装包默认关闭了scandir函数,为了安全考虑. 找到问题所在很简单,其实军哥在安装包里面已经说明关闭了一些函数,自己研究下哈.用winscp或者flashfxp登陆,找到 /usr/local/php/etc/php.ini 下载下来进行编辑,ctrl+f查找disable_functions,找到我们要使用的scandir函数,删除,然后上传