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

 更新时间:2017年04月22日 08:23:44   作者:heyujun-  
我们上网经常会遇到第一次需要登录而之后不用再登录的网站的情况,其实是运用了Cookie 存储 web 页面的用户信息,Cookie 以名/值对形式存储,当浏览器从服务器上请求 web 页面时, 属于该页面的 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>

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

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

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

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

相关文章

  • JavaScript 生成唯一ID的几种方式

    JavaScript 生成唯一ID的几种方式

    这篇文章主要介绍了JavaScript 生成唯一ID的几种方式,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2021-02-02
  • JavaScript修剪字符串的方法和技巧

    JavaScript修剪字符串的方法和技巧

    你在 JavaScript 代码编写中有遇到过一个你需要比较或操作处理字符串,但是在开始或者结尾有额外空格的情况吗?在这篇博客中,我将给你展示如何使用不同的方法在 JavaScript 中修剪字符串,需要的朋友可以参考下
    2024-02-02
  • js中的hasOwnProperty和isPrototypeOf方法使用实例

    js中的hasOwnProperty和isPrototypeOf方法使用实例

    这篇文章主要介绍了js中的hasOwnProperty和isPrototypeOf方法使用实例,需要的朋友可以参考下
    2014-06-06
  • 微信小程序实现团购或秒杀批量倒计时

    微信小程序实现团购或秒杀批量倒计时

    这篇文章主要为大家详细介绍了微信小程序实现团购或秒杀批量倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • Bootstrap源码解读导航条(7)

    Bootstrap源码解读导航条(7)

    这篇文章主要源码解读了Bootstrap导航条,介绍了Bootstrap各式各样的导航条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • WebSocket的通信过程与实现方法详解

    WebSocket的通信过程与实现方法详解

    这篇文章主要给大家爱介绍了关于WebSocket的通信过程与实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧
    2018-04-04
  • 纯javascript判断查询日期是否为有效日期

    纯javascript判断查询日期是否为有效日期

    很多网站都涉及到输入日期选项,如果客户日期输入错误,可能导入查询不到甚至查询到错误的信息,为了更好的满足用户需求,需要对日期进行校验,下面给大家介绍使用纯javascript如何判断查询日期是否为有效日期,需要的朋友可以参考下
    2015-08-08
  • JSON与JavaScript对象关系及语法规则详解

    JSON与JavaScript对象关系及语法规则详解

    这篇文章主要为大家介绍了JSON与JavaScript对象关系及语法规则详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • js 实现div拖拽拉伸完整示例

    js 实现div拖拽拉伸完整示例

    这篇文章主要为大家介绍了js 实现div拖拽拉伸完整示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • JavaScript对象类型转换的分类及步骤详解

    JavaScript对象类型转换的分类及步骤详解

    这篇文章主要为大家介绍了JavaScript对象类型转换的分类及步骤详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05

最新评论