本文实例讲述了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提示框只显示一次的方法的更多相关文章

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

    <script type="text/javascript"> var ua = navigator.userAgent.toLowerCase(); if (/iph ...

  2. highCharts提示框不显示的问题

    使用HighCharts插件进行数据展示的时候,鼠标放在数据处没有提示框,或者只有头尾2个提示框,其他提示框不显示,为什么会这样? 1.查看是否使用了tooltip属性,该属性的enabled默认为t ...

  3. 使提示框居中显示&自定义提示框

    ToastActivity.java文件: 1 public class ToastActivity extends AppCompatActivity { 2 private Button mbtn ...

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

    <script type="text/javascript"> function cookiesave(n, v, mins, dn, path){ if(n) { i ...

  5. jqury关于cooke的操作写入cookie后只显示一次的DIV提示框代码

    有时候当用户登录系统后,需要给用户弹出提示框,但是不需要总是弹出来,在这里加入访问cookie来判断是否弹出过提示框,如果弹出过那么保存cookie,下次根据cookie是否存在来判断是否弹出 < ...

  6. JS学习笔记 -- 定时器，提示框的应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

    参考的代码来自这里: http://www.jb51.net/article/28075.htm 不过说实话,这个网站太烂了,不适合看代码,另外写代码的人是个大牛,但是却没有模块化思想,所以朕不高兴直 ...

  8. angularjs 怎么获取鼠标焦点 鼠标移入显示浮动的div提示框

    首先,我们要清楚几个基础的知识,angular的两个鼠标移入移出的指令------ng-mouseover(鼠标移入)ng-mouseleave(鼠标移出)--------还有就是window.eve ...

  9. 关于iChartjs在移动端提示框tip显示不正常的解决方法

    最近项目需要使用手机图表,但是找了很久都没找到专门为移动端开发的图表,只能找一些能兼容移动端的图表控件,今天就讲讲关于iChartjs这个图形库的一点问题. 问题 iChartjs的提示框tip的显示 ...

随机推荐

  1. python3 进程_multiprocessing模块

    '''多进程优点:可以利用多核,实现并行运算缺点:1.开销太大: 2.通信困难使用方式跟开多线程一样''' 多进程 import multiprocessing import time,os def ...

  2. request threaded-only IRQs with IRQF_ONESHOT【转】

    转自:http://blog.csdn.net/bdc995/article/details/8697374 Gitweb:     http://git.kernel.org/linus/;a=co ...

  3. 【反演复习计划】【bzoj2154】Crash的数字表格

    膜拜cdc……他的推导详细到我这种蒟蒻都能看得懂! 膜拜的传送门 所以我附一下代码就好了. #include<bits/stdc++.h> #define N 10000005 #defi ...

  4. python中的with与上下文管理器

    #转载请留言联系 很多人平时需要打开文件进行读取写入操作时,通常这样: f = open('文件路径','w') f.write(data) f.close 这样写有一个潜在的问题,如果在调用 wri ...

  5. 【C++】各种成员变量

    来自:黄邦勇帅 const 常量对象: 即把对象声明为常量,即 const hyong m,常量对象不能调用可能改变对象的值的函数,因此常量对象只能调用类中的 const 常量函数,因为不是 cons ...

  6. Java处理文件BOM头的方式推荐

    背景: java普通的文件读取方式对于bom是无法正常识别的. 使用普通的InputStreamReader,如果采用的编码正确,那么可以获得正确的字符,但bom仍然附带在结果中,很容易导致数据处理出 ...

  7. 理解和上手Redux

    顾名思义本文分两个部分,理解和上手,第一部分我先讲个故事,这个故事也许不是特别形象,但对大家理解Redux一定有所帮助.第二部分我举个例子. 先讲个故事: 一个餐厅(应用),我是顾客(用户),这个餐厅 ...

  8. pycurl mac 安装报错Curl is configured to use SSL,

    1.使用安装第三方插件的方式安装pycurl:pip3 install pycurl 报错提示如下: Curl is configured to use SSL, but we have not be ...

  9. (1) Flutter android studio安装

    Flutter由两部分组成 Flutter引擎和Flutter框架 Flutter引擎由C++编写,在android上通过NDK编译,在ios上通过llvm编译 Flutter框架由dart编写 1. ...

  10. 2017中国大学生程序设计竞赛 - 女生专场B【DP】

    B HDU - 6024 [题意]:n个教室,选一些教室建造糖果商店. 每个教室,有一个坐标xi和在这个教室建造糖果商店的花费ci. 对于每一个教室,如果这个教室建造糖果商店,花费就是ci,否则就是与 ...