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

我们经常会遇到第一次需要登录，以后不需要登录的网站。事实上，cookies是用来存储网页的用户信息的。Cookies以名称/值对的形式存储。当浏览器向服务器请求网页时，属于该网页的cookies将被添加到请求中。服务器以这种方式获取用户信息l。

今日效果：第一次打开网页时会弹出一个广告框(js实现滚动效果)，广告关闭或页面刷新后不会再出现。由于将cookie信息写入计算机是服务器的行为，因此服务器只会在访问网站时将cookie信息写入计算机。由于它只是一个普通的网页，不可能将cookie信息写入计算机。在很多浏览器中，火狐都支持这种本地操作，所以我们用火狐来测试。

先写广告代码：

style * { padd : 0；margin : 0；} # adv { width: 300pxheight: 300px相对位置：飞越：隐藏；} # adv span { position : absolute；top:15pxright:15px文本修饰：下划线；color: # fffcursor:指针；};/style div id=' adv ' span id=' close ' close/span img src=' http 33601 . png ' alt=' '//div js代码：

script var adv=document . getelementbyid(' adv ')；var close=document . getelementbyid(' close ')；/*广告弹出时滚动效果的方法*/function ani(obj){ var all width=document . document element . client width；//获取网页可见区域的宽度var all height=document . document element . client height；//获取高级样式。left=(all width-adv . offset with)/2 ' px '；//将广告居中放在页面adv . style . top=(all height-adv . offset theight)/2 ' px '；var num=0；var objH=adv.offsetHeightvar计时器；timer=set interval(function(){//timer，增加10px的高度if(numparsent(objH)){ num=10；obj . style . height=num ' px '；} else{ clearInterval(计时器)；} },50);}/*单击关闭广告*/close . onclick=function(){ adv . style . display=' none '；}/* set cookies，存储为字符串，可以有很多参数，但必要的是cookies的名称：name */functionsetcookie(){ var d=new date()；d . SetTime(d . GetTime)(24 * 60 * 60 * 1000)；//设置过去的时间，在当前时间的基础上增加一天。document.cookie=' name=worldexpires=' d . TogMTString()；//expires是cookie的可选参数，设置cookie var res=document.cookie的过期时间；返回res//返回cookie字符串}/*判断网页是否是第一次浏览，如果是第一次浏览，弹出广告，然后设置cookie值，否则隐藏广告*/if (document。cookie==' '){ ani(adv)；setcookie()；} else { adv . style . display=' none '；}/脚本广告渲染如下(第一次浏览网页后，刷新后会消失):

现在测试cookie，关闭Firefox中的cookie，并删除您设置的cookie(无域名)名称，如图所示：

从上图可以看出，cookies的过期时间设置为明天，明天就会过期。如果cookie没有被删除，在cookie过期后广告仍然会弹出。

以上就是边肖给大家介绍的JS，利用cookie来实现只出现一次的广告代码效果。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！