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

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

时间: 2017-04-19

jquery.cookie.js的介绍与使用方法

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

javascript 中Cookie读、写与删除操作

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

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 函数直接上代码: 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

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模

JS中cookie的使用及缺点讲解

 什么是Cookie Cookie意为"甜饼",是由W3C组织提出,最早由Netscape社区发展的一种机制.目前Cookie已经成为标准,所有的主流浏览器如IE.Netscape.Firefox.Opera等都支持Cookie. 由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份.怎么办呢?就给客户端们颁发一个通行证吧,每人一个,无论谁访问都必须携带自己通行证.这样服务器就能从通行证上确认客户身份了.这就是Cookie的工作原理. 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的方法.分享给大家供大家参考,具体如下: 1. 设置cookie function setCookie(cookieName,cookieValue,cookieExpires,cookiePath) { cookieValue = escape(cookieValue);//编码latin-1 if(cookieExpires=="") { var nowDate = new Date(); nowDate.setMonth(n

JavaScript设置、获取、清除单值和多值cookie的方法

废话不多说了,直接给大家贴代码了. 具体代码如下: var CookieUtil = (function () { var Cookie = function () { // 获取单值cookie this.get = function(name) { var start = document.cookie.indexOf(encodeURIComponent(name)) ; var end = document.cookie.indexOf(';', start) ; if(end == -

javascript实现获取cookie过期时间的变通方法

javascript和动态页无法获取cookie过期的时间,过期时间由浏览器管理,javascript和动态页只能设置过期时间,无法通过document.cookie(javascript)或者Cookie.Expires(asp.net)属性获取到. 复制代码 代码如下: <%@page language="C#" Debug="true"%> <script runat="server">     protected

JavaScript实现基于Cookie的存储类实例

本文实例讲述了JavaScript实现基于Cookie的存储类.分享给大家供大家参考.具体分析如下: 通过这个JS类,你可以象使用session一样使用cookie,非常简单了! /* * CookieStorage.js * 本类实现像localStorage和sessionStorage一样的存储API * 不同的是,它是基于HTTP Cookies实现的. */ function CookieStorage(maxage, path) { // 两个参数分别代表储存有效期和作用域 // 获

javascript制作的cookie封装及使用指南

一.前言 之前使用cookie,都是document.cookie的形式去操作,兼容性虽好,但是麻烦.个人又是个比较喜欢造轮子的人,所以针对cookie,封装了个工具类.很长时间以来,我都喜欢写代码,而不太喜欢文字总结,也不太喜欢写些零碎的东西,看来得改. 二.思路 (1)如何封装,封装成啥样 如何封装:就是使用原生的js封装成工具,那样到哪里都能能用.针对document.cookie封装是最好的方式,所有的操作都基于document.cookie. 封装成啥样:封装成能够以对象的形式存在,同

详谈javascript中的cookie

JavaScript中的另一个机制:cookie,则可以达到真正全局变量的要求. cookie是浏览器 提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由JavaScript对其进行控制,而并不是JavaScript本身的性质. cookie概述 在上一节,曾经利用一个不变的框架来存储购物栏数据,而商品显示页面是不断变化的, 尽管这样能达到一个模拟 全局变量的功能,但并不严谨.例如在导航框架页面内右击,单击快捷菜单中的[刷新]命令,则所有的JavaSc

关于Javascript中document.cookie的使用

设置cookie 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="userId=828"; 如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如: document.cookie="userId=828; userName=hulk"; 在cookie的名或值中不能使用分号(;).逗号(,).等号(=)以及空格. 在cookie的名中做到这点很容易,但要保存的值是不确定的

JavaScript设置首页和收藏页面的小例子

复制代码 代码如下: <html>    <head>       <title>JavaScript设置首页和收藏页面(兼容IE和火狐)</title>       <script>       //url:要收藏的链接:title:收藏项的名称       function AddFavorite(url,title)       {          //如果url或者title为空,默认为当前页面url和title.          i

JavaScript设置名字输入不合法的实现方法

html代码: <tr> <th>输入名称:</th> <td><input type='text' class='normal' name='name' pattern='required' alt='名称'id="checkText" onblur="checkName()" /><label>* 特价活动名称</label></td> </tr> 在表单