当前位置:首页 > 编程教程 > javascript技术文章 > JS使用cookie实现只出现一次的广告代码效果

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

  • 发布时间:
  • 作者:码农之家
  • 点击:134

这篇文章主要知识点是关于cookie、js、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript+Vue+React全程实例
  • 类型:JS实例大小:59150 MB M格式:PDF作者:郑均辉,薛燚
立即下载

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

我们上网经常会遇到第一次需要登录而之后不用再登录的网站的情况,其实是运用了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实现只出现一次的广告代码效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.507103

cookie.js 加载顺序问题怎么才有效

今天遇到一个问题,在使用cookie.js时,只有在jquery.js文件后加载整体才有效 有效加载顺序 head script type="text/javascript" src="./Scripts/scripts/jquery.1.3.2.js"/script script type="text/javascript" src="./Scripts/jquery.cookie.js"/script /head ……

网友NO.951833

jquery.cookie.js实现用户登录保存密码功能的方法

本文实例讲述了jquery.cookie.js实现用户登录保存密码功能的方法。分享给大家供大家参考,具体如下: 需要导入的js有jquery.js和jquery.cookie.js script type="text/javascript" src=" jquery-1.5.2.js"/scriptscript type="text/javascript" src="jquery.cookie.js"/script 在页面加载时首先尝试获取cookie的值,如果cookie有值,则将获取到的值填入输入框中,并将保存密码的复选框选中 jQuery(function(){ //获取cookie的值 var username = $.cookie('username'); var password = $.cookie('password'); //将获取的值填充入输入框中 $('#uName').val(username); $('#psw').val(password); if(username != null username != '' password != null password != ''){//选中保存秘密的复选框 $("#remember_password").attr('checked',true); }}); 在登录时判断保存密码复选框是否被选中,若选中则创建cookie(有效期可以自己决定,下面的cookie有效期是7天),若没有选中,则删除cookie(因为……

网友NO.760841

基于js中document.cookie全面解析

什么是cookie? cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。 设置cookie 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="userId=828"; document.cookie看上去就像一个属性,可以赋不同的值。但它和一般的属性不一样,改变它的赋值并不意味着丢失原来的值,例如连续执行下面两条语句: document.cookie="userId=828";document.cookie="userName=hulk"; 这时浏览器将维护两个cookie,分别是userId和userName,因此给document.cookie赋值更像执行类似这样的语句: document.addCookie("userId=828");document.addCookie("userName=hulk"); 事实上,浏览器就是按照这样的方式来设置cookie的,如果要改变一个cookie的值,只需重新赋值,例如: document.cookie="userId=929"……

网友NO.404258

node.js cookie-parser 中间件介绍

之前加入了一个学习笔记本群,通过学习笔记来分享学习成果。也在这里发一份吧。 当我们在写web的时候,难免会要使用到cookie,由于node.js有了express这个web框架,我们就可以方便地去建站。在使用express时,经常会使用到cookie-parser这个插件。今天我们来分析一下这个插件。 这个插件通常当作中间件使用,app.use(cookieParser()), 这样就可以处理每一个请求的cookie。 从名字上看,这就是一个解释Cookie的工具。通过req.cookies可以取到传过来的cookie,并把它们转成对象。下面,我们来深入它的源码。 首先,我们看 index.js 复制代码 代码如下: var cookie = require('cookie'); var parse = require('./lib/parse'); 这里有2个引用,一个是cookie,一个是cookie-parser这个核心功能。cookie这个模块,只提供了2个方法,一个是serialize另一个是parse。 serialize方法接收key和val,并序列化。 复制代……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com