定时器应用-页面弹出广告

页面弹出广告

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)