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


Posted in Javascript onApril 22, 2017

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

Javascript 相关文章推荐
12行javascript代码绘制一个八卦图
Apr 02 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
js生成随机数的方法实例
Oct 16 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 #Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 #jQuery
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 #Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 #Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 #Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 #Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 #jQuery
You might like
PHP APC配置文件2套和参数详解
2014/06/11 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
小程序实现投票进度条
2019/11/20 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
python下载微信公众号相关文章
2019/02/26 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
一年级数学下册复习计划
2015/01/17 职场文书
捐款通知怎么写
2015/04/24 职场文书
食品安全主题班会
2015/08/13 职场文书
网络研修随笔感言
2015/11/18 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers