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

2024-12-13 20:25:33

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

PHP如何读取由JavaScript设置的Cookie

cookie在开发中使用的非常多,但如果是使用JavaScript设置cookie然后使用PHP读取出来如何实现呢?即PHP与JavaScript下Cookie的交互使用是否可行呢? <?php // 读取JavaScript设置的cookie header("Content-type: text/html; charset=utf-8"); if(isset($_COOKIE["param"])){ echo $_COOKIE["param&quo
javascript 中Cookie读、写与删除操作

javascript 中Cookie读.写与删除操作前言: 在这个前端横行的时候,页面之间的交互需要数据的传递,有的数据通过url传参的形式可以很好地解决,但是对于部分需要改变的参数,你如说从页面A到页面B选择数据,然后从页面B将数据再传到页面A(典型的栗子就是收货地址的选择),针对这一块我是通过存储cookie来解决的. 对于cookie的操作我给出了一些简单的封装,当然也借鉴了前辈们经验,自己糅合了一下,对于cookie的操作,无非是读写和删除,我们首先来看一下写的操作,有写才有读,进而
JS 设置Cookie 有效期检测cookie

设置cookie 函数直接上代码: function setCookie(name, value, days) { //设置cookie var d = new Date(); d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = "expires=" + d.toUTCString(); document.cookie = name + "=" + value + ";
js cookie实现记住密码功能

本文为大家分享了js和jQuery记住密码功能的方法,具体如下一. js 实现记住密码功能 html: <form id="form22" name="form22" action="checklogin.action" method="post" > <div class="username" style="margin-top:50px;"> <lab
javascript cookie的基本操作（添加和删除）

javascript cookie的基本操作(添加和删除) 1.添加一个cookie:response.addCookie(Cookie c); 2.获取cookie集合: request.getCookies(); 3.新建一个cookie: new Cookie(String name,String value) - Cookie在构造的时候就需要设定好cookie的名字和值 4.获取cookie的名字:cookie.getName(); 5.获取cookie的值:cookie.getVal
JS中cookie的使用及缺点讲解

什么是Cookie Cookie意为"甜饼",是由W3C组织提出,最早由Netscape社区发展的一种机制.目前Cookie已经成为标准,所有的主流浏览器如IE.Netscape.Firefox.Opera等都支持Cookie. 由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份.怎么办呢?就给客户端们颁发一个通行证吧,每人一个,无论谁访问都必须携带自己通行证.这样服务器就能从通行证上确认客户身份了.这就是Cookie的工作原理. Cookie实际上是一小段的文本信
node.js平台下利用cookie实现记住密码登陆（Express+Ejs+Mysql）

此内容需有node.js+express+mysql入门基础,若基础薄弱,可参考博主的其他几篇node.js博文: 1.下载Mysql数据库,安装并配置.创建用户表供登录使用: 2.node.js平台下Express的session与cookie模块包的配置:http://www.jb51.net/article/112190.htm 3.node.js平台下的mysql数据库配置及连接:http://www.jb51.net/article/110079.htm 完成前两步后需下载配置Ejs模
jquery.cookie.js的介绍与使用方法

什么是 cookie? cookie 就是页面用来保存信息,比如自动登录.记住用户名等等. cookie 的特点同个网站中所有的页面共享一套 cookie cookie 有数量.大小限制 cookie 有过期时间jquery.cookie.js 是一款轻量级的 cookie 插件,可以读取,写入和删除 cookie.本文主要针对 jquery.cookie.js 的用法进行详细的介绍. 使用方法: 设置 cookie: $.cookie('the_cookie', 'the_value');
JS使用cookie实现只出现一次的广告代码效果

我们上网经常会遇到第一次需要登录而之后不用再登录的网站的情况,其实是运用了Cookie 存储 web 页面的用户信息,Cookie 以名/值对形式存储,当浏览器从服务器上请求 web 页面时, 属于该页面的 cookie 会被添加到该请求中.服务端通过这种方式来获取用户的信息l. 今天的这个效果:第一次打开网页弹出一个广告框(js实现卷帘效果),关闭广告或刷新页面之后就不会再出现.由于往电脑里写cookie信息是服务器行为,只有访问网站,服务器才会向电脑里写cookie信息,由于现在只是普通网页
不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码

纯DIV/CSS对联漂浮广告代码(无JS) 源码网两侧漂浮.经测试,兼容IE6,IE7,Firefox浏览器. CSS代码为: 复制代码代码如下: .r1{width:80px;height:80px;background:red;float:right; position:fixed !important; top/**/:200px; position:absolute; z-index:300; top:expression(offsetParent.
js读写COOKIE实现记住帐号或密码的代码(js读写COOKIE)

js COOKIE 记住帐号或密码 function onLoginLoaded() { if(isPostBack == "False") { GetLastUser(); } } function GetLastUser() { var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67"; var usr = GetCookie(id); if(usr != null) { document.getElementById('t
用js读写cookie的简单方法(推荐)

在数据安全要求不是很高的情况下,我们可以直接用js对cookie进行读写,这样比较方便. 代码如下: /* 功能:保存cookies函数参数:name,cookie名字:value,值 */ function SetCookie(name,value){ var Days = 30*12; //cookie 将被保存一年 var exp = new Date(); //获得当前时间 exp.setTime(exp.getTime() + Days*24*60*60*1000); //换成毫秒
JS使用cookie实现DIV提示框只显示一次的方法

本文实例讲述了JS使用cookie实现DIV提示框只显示一次的方法.分享给大家供大家参考,具体如下: 这里运用JavaScript的cookie技术,控制网页上的提示DIV只显示一次,也就是当用户是第一次打开网页的时候才显示,第二次自动隐藏起来,很好的提升了用户体验,不会使用户烦感:利用Cookies,我们还可做超多的事情,慢慢体会吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cookie-div-dlg-show-once-cod
JS设置cookie、读取cookie

JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的. 而cookie是运行在客户端的,所以可以用JS来设置cookie. js设置cookie方法汇总: 第一种: <script> //设置cookie function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); v
js利用cookie实现记住用户页面操作

前言开发过程中,有时候会遇到一些类似需求,比如记住用户在浏览器层面所做的操作.之前做过一个功能,当时使用了一个拖拽插件展示一个类似九宫格的报表图,每个图形都可以显示和隐藏,如果用户点击了显示或隐藏按钮,那么下次进入系统时浏览器保留上一次的操作结果.核心部分是使用js对cookie进行操作,具体业务部分则是触发点击图形事件时,如果是隐藏,则将该图形对应的div从cookie中删除,点击显示时,将图形div写入cookie.本文只记录cookie部分操作,具体业务代码大家可以根据自己的实际情况去写
JS设置cookie、读取cookie、删除cookie

JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的. 而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一种情况,在某个用例流程中,由A页面跳至B页面,若在A页面中采用JS用变量temp保存了某一变量的值,在B页面的时候,同样需要使用JS来引用temp的变量值,对于JS中的全局变量或者静态变量的生命周期是有限的,当发生页面跳转或者页面关闭的时候,这些变量的值会重新载入,即没有达到保存的效果.解决这个问题
JS基于cookie实现来宾统计记录访客信息的方法

本文实例讲述了JS基于cookie实现来宾统计记录访客信息的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript记录访客的来宾信息,记录是第几次来访,显示的信息有:您的名字;您浏览该网页的次数;您上次浏览网页的时间.可以更改姓名. 运行效果如下图所示: 具体代码如下: <html> <head> <title>记录客户信息</title> <script language="JavaScript"> <!

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

相关推荐

随机推荐