关闭广告的案例

1. 5s后关闭广告

<div>这是一则广告<span title="关闭广告">×</span></div>
<script>
//获取相关元素
var div = document.getElementsByTagName("div")[0];
setTimeout(function(){
		div.style.display = "none";},5000);
</script>

2. 点击关闭按钮时，透明度先逐渐降低，再消失
   
   CSS部分

<style>
body {
	margin: 0px;
	padding: 0px;
}
div {
	position: relative;
	height: 50px;
	font: 700 20px/50px "simsun";
	text-align: center;
	background: #f00;
	color: #fff;
}
span {
	position: absolute;
	top: 2px;
	right: 2px;
	display: inline-block;
	height: 35px;
	width: 35px;
	font: 400 12px/35px "simsun";
	text-align: center;
	color: #fff;
	cursor: pointer;
}
.un {
	background-color: #000;
	color: #fff;
}
</style>

body部分

<div style="opacity:1">这是一则广告<span title="关闭广告">×</span></div>
<div class="un">我也不知道为什么在这</div>
<script>
//获取相关元素
var div = document.getElementsByTagName("div")[0];
var span = document.getElementsByTagName("span")[0];
span.onclick = function (){
	var timer = null;
	timer = setInterval(function(){
		div.style.opacity -= 0.1;
		if(div.style.opacity<0){
			clearInterval(timer);
			div.style.display = "none";
		}
	},100);
}