本文介绍如何使用JavaScript结合Cookie技术，实现网页广告仅在用户首次访问时通过卷帘动画展示，后续访问自动隐藏。文章包含完整的HTML结构、CSS样式及JS逻辑代码，并针对火狐浏览器进行了本地Cookie测试说明，适合需要控制广告展示频率的前端开发者参考。
Cookie原理与浏览器限制说明
在浏览网页时，我们常遇到首次访问需登录而后续无需重复登录的情况，这得益于Cookie对Web页面用户信息的存储。Cookie以名/值对的形式保存数据，当浏览器向服务器请求Web页面时，相关的Cookie会被附加到请求中，服务器借此获取用户信息。
本文演示的效果是：首次打开网页时弹出带有卷帘动画效果的广告框，关闭广告或刷新页面后不再显示。由于向计算机写入Cookie通常由服务器行为触发，普通静态网页无法直接写入本地Cookie。目前多数浏览器对此有安全限制，但火狐浏览器支持此类本地操作，因此建议使用火狐浏览器进行测试。
广告HTML与CSS结构
首先编写广告部分的HTML代码：
<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" alt="" />
</div>JavaScript逻辑实现
接着编写JavaScript逻辑代码：
<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>广告效果如图1所示（首次浏览网页时显示，刷新后消失）：
Cookie测试与注意事项
接下来在火狐浏览器中测试Cookie设置。若关闭Cookie功能或移除未设置域名的Cookie（如图2所示），则无法正确保存状态。
从图2可见，Cookie的过期时间被设置为次日，届时Cookie将失效，若未手动删除，广告会在Cookie过期后再次弹出。
以上介绍了利用JS和Cookie实现广告仅出现一次的代码效果，希望有所帮助。如有疑问请留言，小编会及时回复。感谢对本站的支持！