JS如何使用cookie實現只出現一次廣告效果

這篇文章將為大家詳細講解有關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"  />
 </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實現只出現一次廣告效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。