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 相关文章推荐
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
layui使用及简单的三级联动实现教程
Dec 01 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-fpm配置详解
2014/02/12 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
细说javascript函数从函数的构成开始
2013/08/29 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
js中作用域的实例解析
2017/03/16 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
python基础教程之常用运算符
2014/08/29 Python
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
python服务器与android客户端socket通信实例
2014/11/12 Python
Python for Informatics 第11章之正则表达式(四)
2016/04/21 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
Python语法分析之字符串格式化
2019/06/13 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
保安拾金不昧表扬信
2014/01/15 职场文书
预备党员承诺书
2014/03/25 职场文书
授权委托书格式
2014/07/31 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
pandas中pd.groupby()的用法详解
2022/06/16 Python