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

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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

2

3

4

<div id="adv">

    <span id="close">关闭</span>

    <img src="1.png" alt="" />

 </div>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

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