How can I make the ad appear only once? JS uses cookies to implement advertising effect code that only appears once

When we go online, we often encounter websites that require you to log in for the first time but do not need to log in again. In fact, cookies are used to store user information on web pages. Cookies are stored in the form of name/value pairs. When the browser logs in from the server When a web page is requested, the cookie belonging to the page will be added to the request.

When we go online, we often encounter websites that require login for the first time but do not need to login again. In fact, cookies are used. To store user information of a web page, cookies are stored in the form of name/value pairs. When the browser requests a web page from the server, the cookie belonging to the page will be added to the request. The server obtains user information in this way.

Today’s effect: When opening a webpage for the first time, an advertising box pops up (js implements the rolling shutter effect). After closing the advertising or refreshing the page, it will not appear again. Since writing cookie information to the computer is a server behavior, the server will only write cookie information to the computer when accessing the website. Since it is just an ordinary web page, it cannot write cookie information to the computer. Among many browsers, Firefox supports this local operation, so we used Firefox for testing.

Write the advertising code first:

<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>

<p id="adv">
    <span id="close">关闭</span>
    <img src="1.png" alt="" />
 </p>

js code:

<script>
    var adv=document.getElementById(&#39;adv&#39;);
    var close=document.getElementById(&#39;close&#39;);
    /*广告弹出时的卷帘效果方法*/
    function ani(obj){
      var allWidth=document.documentElement.clientWidth; //获取网页可视区域宽
      var allHeight=document.documentElement.clientHeight;//获取网页可视区域高
      adv.style.left= (allWidth-adv.offsetWidth)/2+&#39;px&#39;; //使广告居中在页面
      adv.style.top= (allHeight-adv.offsetHeight)/2+&#39;px&#39;;
      var num=0;
      var objH=adv.offsetHeight;
      var timer;
      timer=setInterval(function(){  //定时器，没50毫秒增加10px的高度
        if(num<parseInt(objH)){
          num+=10;
          obj.style.height=num+&#39;px&#39;;
        }
        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=&#39;none&#39;;
    }
</script>

The advertising effect picture is as follows (the first time you browse the webpage, it disappears after refreshing):

Now test the cookies, turn off cookies in Firefox, and The name of the cookie (without domain name) you set is removed and selected, as shown in the picture:

As you can see from the picture above, the expiration time of the cookie is set to tomorrow, and it will expire tomorrow. , if you don’t delete the cookie, ads will still pop up after the cookie expires.

Students who need to learn js please pay attention to php Chinese website js video tutorial, many js online video tutorials can be watched for free!

The above is the detailed content of How can I make the ad appear only once? JS uses cookies to implement advertising effect code that only appears once. For more information, please follow other related articles on the PHP Chinese website!