快捷導(dǎo)航

JS使用cookie實(shí)現(xiàn)只出現(xiàn)一次的廣告代碼效果

更新時間：2017年04月22日 08:23:44 作者：heyujun-

我們上網(wǎng)經(jīng)常會遇到第一次需要登錄而之后不用再登錄的網(wǎng)站的情況，其實(shí)是運(yùn)用了Cookie 存儲 web 頁面的用戶信息，Cookie 以名/值對形式存儲,當(dāng)瀏覽器從服務(wù)器上請求 web 頁面時，屬于該頁面的 cookie 會被添加到該請求中

我們上網(wǎng)經(jīng)常會遇到第一次需要登錄而之后不用再登錄的網(wǎng)站的情況，其實(shí)是運(yùn)用了Cookie 存儲 web 頁面的用戶信息，Cookie 以名/值對形式存儲,當(dāng)瀏覽器從服務(wù)器上請求 web 頁面時，屬于該頁面的 cookie 會被添加到該請求中。服務(wù)端通過這種方式來獲取用戶的信息l。

今天的這個效果：第一次打開網(wǎng)頁彈出一個廣告框（js實(shí)現(xiàn)卷簾效果），關(guān)閉廣告或刷新頁面之后就不會再出現(xiàn)。由于往電腦里寫cookie信息是服務(wù)器行為，只有訪問網(wǎng)站，服務(wù)器才會向電腦里寫cookie信息，由于現(xiàn)在只是普通網(wǎng)頁，所以無法往電腦里寫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">關(guān)閉</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; //獲取網(wǎng)頁可視區(qū)域?qū)?
      var allHeight=document.documentElement.clientHeight;//獲取網(wǎng)頁可視區(qū)域高
      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);
    }
    /*點(diǎn)擊關(guān)閉廣告*/
    close.onclick=function(){
      adv.style.display="none";
    }
    /*設(shè)置cookie，cookie是以字符串形式存儲的，可以有很多參數(shù)，但必要的一個是cookie 的名稱name*/
    function setcookie(){
      var d=new Date(); 
      d.setTime(d.getTime()+24*60*60*1000);  //設(shè)置過去時間為當(dāng)前時間增加一天
      document.cookie="name=world;expires="+d.toGMTString(); //expires是cookie的一個可選參數(shù)，設(shè)置cookie的過期時間
      var res=document.cookie;
      return res;  //返回cookie字符串
    }
    /*判斷網(wǎng)頁是否是第一次瀏覽，如果第一次則彈出廣告，然后設(shè)置cookie值，否則把廣告隱藏*/
    if(document.cookie==""){
      ani(adv);
      setcookie();
    }else{
      adv.style.display='none';
    }
</script>

廣告效果圖如下（第一次瀏覽網(wǎng)頁，刷新后就沒有了）：