页面弹出广告
HTML
<div class="box" id="box">
<span>5s</span>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510215046666&di=6ca76810fc76080df20f32b3ac81bdb7&imgtype=0&src=http%3A%2F%2Fwww.wallcoo.com%2Fphotograph%2FTilt-shift_Photography_Wallpapers_1920x1080%2Fwallpapers%2F1366x768%2FTilt_Shift_Wallpaper_24_by_leiyagami.jpg"/>
</div>
CSS
*{
margin: 0;
padding: 0;
}
.box{
width: 50%;
margin: 50px auto 0;
position: relative;
display: none;
}
img{
width: 100%;
height: 100%;
}
span{
font-size: 20px;
color: #fff;
position: absolute;
top: 5px;
right: 5px;
}
JS
var oBox=document.getElementById("box");
var oSpan=oBox.getElementsByTagName("span")[0];
var num=5;
var timer=null;
setTimeout(function(){
//广告显示
oBox.style.display="block";
//计时秒
timer=setInterval(function(){
num--;
oSpan.innerHTML=num+"s";
},1000)
},1000)
setTimeout(function(){
//广告隐藏
oBox.style.display="none";
//清除定时器
clearInterval(timer);
},7000)