利用cookie实现只弹出一次窗口的js代码

  • 时间:
  • 5035人关注

我们上网经常会遇到第一次需要登录而之后不用再登录的网站的情况,其实是运用了Cookie 存储 web 页面的用户信息,Cookie 以名/值对形式存储,当浏览器从服务器上请求 web 页面时, 属于该页面的,另外这篇文章主要知识点是关于cookie、js、javascript的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:javascript
  • 编辑整理:权书蝶
  • 教程字数:1895字节
  • 阅读时间:大概11分钟
  • 下载本教程(DOC版)
  • 《Vue.js前端开发基础与项目实战》项目源码
  • Get Cookie For FPlus
  • Cookie-Editor
  • JSON-handle
  • Quick Javascript Switcher
  • 我们上网经常会遇到第一次需要登录而之后不用再登录的网站的情况,其实是运用了Cookie 存储 web 页面的用户信息,Cookie 以名/值对形式存储,当浏览器从服务器上请求 web 页面时, 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息l。

    今天的这个效果:第一次打开网页弹出一个广告框(js实现卷帘效果),关闭广告或刷新页面之后就不会再出现。由于往电脑里写cookie信息是服务器行为,只有访问网站,服务器才会向电脑里写cookie信息,由于现在只是普通网页,所以无法往电脑里写cookie信息的。在众多浏览器中火狐浏览器是支持这种本地操作,因此我们用火狐测试。

    先写广告代码:

    <style>
    *{padding: 0;margin: 0;}
      #adv{
        width: 300px;
        height: 300px;
        position: relative;
        overflow: hidden;
      }
      #adv span{
        position: absolute;
        top:15px;
        right:15px;
        text-decoration: underline;
        color: #fff;
        cursor: pointer;
      };
    </style>
    <div id="adv">
        <span id="close">关闭</span>
        <img src="1.png" alt="" />
     </div>

    js代码:

    <script>
        var adv=document.getElementById('adv');
        var close=document.getElementById('close');
        /*广告弹出时的卷帘效果方法*/
        function ani(obj){
          var allWidth=document.documentElement.clientWidth; //获取网页可视区域宽
          var allHeight=document.documentElement.clientHeight;//获取网页可视区域高
          adv.style.left= (allWidth-adv.offsetWidth)/2+'px'; //使广告居中在页面
          adv.style.top= (allHeight-adv.offsetHeight)/2+'px';
          var num=0;
          var objH=adv.offsetHeight;
          var timer;
          timer=setInterval(function(){  //定时器,没50毫秒增加10px的高度
            if(num<parseInt(objH)){
              num+=10;
              obj.style.height=num+'px';
            }
            else{
              clearInterval(timer);
            }
          },50);
        }
        /*点击关闭广告*/
        close.onclick=function(){
          adv.style.display="none";
        }
        /*设置cookie,cookie是以字符串形式存储的,可以有很多参数,但必要的一个是cookie 的名称name*/
        function setcookie(){
          var d=new Date(); 
          d.setTime(d.getTime()+24*60*60*1000);  //设置过去时间为当前时间增加一天
          document.cookie="name=world;expires="+d.toGMTString(); //expires是cookie的一个可选参数,设置cookie的过期时间
          var res=document.cookie;
          return res;  //返回cookie字符串
        }
        /*判断网页是否是第一次浏览,如果第一次则弹出广告,然后设置cookie值,否则把广告隐藏*/
        if(document.cookie==""){
          ani(adv);
          setcookie();
        }else{
          adv.style.display='none';
        }
    </script>

    广告效果图如下(第一次浏览网页,刷新后就没有了):

    JS使用cookie实现只出现一次的广告代码效果

    现在测试cookie,在火狐里关闭cookie,把你设置的cookie(没有域名)name移除选中,如图:

    JS使用cookie实现只出现一次的广告代码效果

    从上图可以看到,cookie的过期时间设置为了明天,明天就会失效,如果不删除cookie,等cookie失效后还是会弹出广告。

    以上所述是小编给大家介绍的JS使用cookie实现只出现一次的广告代码效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!


    上一篇:zTree树形插件异步加载的实例方法

    下一篇:COM组件中调用JavaScript函数的实例讲解

    相关内容

    • java与jsp的区别

      java是一种语言类似于C语言等的编程语言,而JSP(JavaServer Pages)是一种动态网页技术标准。 JSP和JAVA的区别,JSP算是JAVA一种技术吧,用在网页编程上,因为JAVA不能直接写在html上,但jsp能,jsp就是Servlet程序,当JSP收到客户的请求时,SCRIPTLET(脚本小程序)就会被执行,脚本段将被插入到JSP所生成的目标Servlet的Serivce函数中.所以脚本小程序不能写方法(函数),因为方法里面不能再有方法了.JSP的执行过程。 1、首先,JAVA是一门

      12-17JSP和JAVA的区别

      阅读更多
    • js可以替代java吗

      nodejs不会替代java。在虚拟机层面 node.js 基于的v8 VM看起来很不错,但和Java的 VM 一比,差距甚远。在服务器领域,特别是拥有众多 CPU 和大量内存的环境下,Java 的 VM 几乎是你能在地球上找到的最好的 VM。而v8既不能充分利用多CPU的性能,也不能将内存充分利用。Node.js是从前端转过来的,恰恰前端是计算机领域少数几个不需要计算机体系知识就能胜任的职业。想要真正做到像java那样水平,计算机体系性的知识必不可少。Node.js特别适合中小型系统的快速开

      12-13js能替代java吗

      阅读更多
    • JAVA直接访问jsp页面报404吗

      404表示的是路径未找到错误,解决办法如下: 【解决方法】 1、首先看错误信息 第一行 2、这里有出错的路径,也就是哪个找不到的路径 3、然后回程序中找调用这个路径的地方,确定路径写的是否正确,是否可达。 JSP页面运行时报的404错处理方法如下: 保证在你的Console窗口中看不到任何起到影响的Exception(jsp在编译的时候会先检查web.xml文件,如果全部正常,没有任何Exception的话,才会成功部署到.metadata\.plugins\org.eclipse.wst.server.

      12-12JAVA访问jsp页面报404吗

      阅读更多
    • jsp实质是java程序对吗

      JSP页面在本质上就是Servlet程序,当JSP页面在首次被访问时,Web容器就会将JSP页面转化为Servlet,只需要做一次。如index.jsp在首次被访问时,Web容器会将其翻译成一个index_jsp.java文件,即Servlet代码。 JSP是服务器端的一种基于java语言的网页技术,它是由一些JSP标记,java程序段以及HTML文件组成的结合体,以java语言作为其内置的脚本语言。实质上是通过调用JSP引擎来生成java文件,再将这个java文件编译成类文件,并执行这个类文件以生成动态

      12-05jsp实质是java程序吗

      阅读更多
    • jsp文件就是java文件吗

      jsp文件不是java文件,java是一种语言类似于C语言等的编程语言,而JSP(JavaServer Pages)是一种动态网页技术标准。jsp是一个网页页面,相当于复杂的html。其中可以插入script代码,当然也可以插入java代码。j ava是一个类文件,在java学习初期主要是写java文件的。如果不写页面的话是没有页面效果的。 1、JSP的写的代码,不利于代码重用。JAVA本来就是面向对象的语言,但在JSP中,体现不出来代码重用的优势。如果把一些通用的代码写成JAVA文件,就方便了很多,例

      12-02jsp文件是java文件吗

      阅读更多
    • JavaScript启示录

      JavaScript启示录

      《JavaScript启示录》无关于JavaScript设计模式,也无关于JavaScript面向对象代码实现。《JavaScript启示录》意图通过考察原生JavaScript对象和不同环境对原生对象的支持和细微差别。

      大小:24.4 MBJS

      点击下载
    • JavaScript忍者秘籍

      JavaScript忍者秘籍

      JavaScript语言非常重要,相关的技术图书也很多,但没有任何一本书对JavaScript语言的重要部分(函数、闭包和原型)进行深入、全面的介绍,也没有任何一本书讲述跨浏览器代码的编写。本书是

      大小:83.5 MBJavaScript

      点击下载
    • 第三方JavaScript编程

      第三方JavaScript编程

      第三方JavaScript应用程序是自包含的应用组件,通常都是小脚本或插件,能够为Web站点增加功能。它们往往是由独立的组织或个人提供的,代码和文件都是来自于远程的Web地址。 《第三方JavaS

      大小:74.2 MBJavaScript

      点击下载
    • JavaScript核心技术开发解密

      JavaScript核心技术开发解密

      这本书针对JavaScript 中的核心技术,结合前沿开发实践,全面的讲解与分析JavaScript 的内存、函数、执行上下文、面向对象、模块等重点知识

      大小:68.4 MBJavaScript

      点击下载
    • JavaScript和jQuery实战手册

      JavaScript和jQuery实战手册

      JavaScript可以大大改进网页的动画、交互性和视觉效果,但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识,展示了如何使用jQuery(即预先写好的JavaScript代码库)来节省时间和精

      大小:103 MBJavaScript

      点击下载
    • Head First JavaScript程序设计

      Head First JavaScript程序设计

      大小:71.2 MBJavaScript

      点击下载
    • HTML5+CSS3+JavaScript从入门到精通

      HTML5+CSS3+JavaScript从入门到精通

      本书以基础知识、示例、实战案例相结合的方式详尽讲述了HTML,CSS,JavaScript及目前最新的前端技术

      大小:186 MBweb开发

      点击下载

    学习笔记