JS利用Cookie实现仅首次显示的卷帘广告

作者:异步漫步时间:2026-10-22 03:20:13浏览:376

本文介绍如何使用JavaScript结合Cookie技术,实现网页广告仅在用户首次访问时通过卷帘动画展示,后续访问自动隐藏。文章包含完整的HTML结构、CSS样式及JS逻辑代码,并针对火狐浏览器进行了本地Cookie测试说明,适合需要控制广告展示频率的前端开发者参考。

Cookie原理与浏览器限制说明

在浏览网页时,我们常遇到首次访问需登录而后续无需重复登录的情况,这得益于Cookie对Web页面用户信息的存储。Cookie以名/值对的形式保存数据,当浏览器向服务器请求Web页面时,相关的Cookie会被附加到请求中,服务器借此获取用户信息。

本文演示的效果是:首次打开网页时弹出带有卷帘动画效果的广告框,关闭广告或刷新页面后不再显示。由于向计算机写入Cookie通常由服务器行为触发,普通静态网页无法直接写入本地Cookie。目前多数浏览器对此有安全限制,但火狐浏览器支持此类本地操作,因此建议使用火狐浏览器进行测试。

广告HTML与CSS结构

首先编写广告部分的HTML代码:


<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>

JavaScript逻辑实现

接着编写JavaScript逻辑代码:


<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>

广告效果如图1所示(首次浏览网页时显示,刷新后消失):

Cookie原理与浏览器限制说明

Cookie测试与注意事项

接下来在火狐浏览器中测试Cookie设置。若关闭Cookie功能或移除未设置域名的Cookie(如图2所示),则无法正确保存状态。

Cookie原理与浏览器限制说明

从图2可见,Cookie的过期时间被设置为次日,届时Cookie将失效,若未手动删除,广告会在Cookie过期后再次弹出。

以上介绍了利用JS和Cookie实现广告仅出现一次的代码效果,希望有所帮助。如有疑问请留言,小编会及时回复。感谢对本站的支持!

作者最新文章