JS使用cookie实现只出现一次的广告代码效果_网络技术

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

发布时间 - 2026-01-11 00:46:19 点击率：次

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

# cookie实现只出现一次的广告代码 # js # cookie # 次数 # JS实现关闭小广告特效 # js实现左右两侧浮动广告 # javascript实现循环广告条效果 # 基于JavaScript实现淘宝商品广告效果 # 用js屏蔽被http劫持的浮动广告实现方法 # JavaScript实现弹出广告功能 # 原生js实现网页顶部自动下拉/收缩广告效果 # JavaScript实现广告弹窗效果 # JavaScript cookie 跨域访问之广告推广 # JS前端广告拦截实现原理解析 # 弹出 # 火狐 # 小编 # 明天 # 就会 # 在此 # 有很多 # 就不 # 把你 # 就没 # 给大家 # 可以看到 # 时间为 # 可选 # 如图 # 会再 # 经常会 # 所述 # 给我留言 # 服务端

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何监控和诊断域名服务器的性能问题？

下一篇：CentOS怎么关闭VI命令_CentOS VI编辑器退出与

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何监控和诊断域名服务器的性能问题？

下一篇：CentOS怎么关闭VI命令_CentOS VI编辑器退出与