html页面：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/StyleSheet.css" rel="stylesheet" />
<script src="../jquery.js"></script>
<script>
function time() {
$t = $("#t").text();
if ($t!=) {
$("#t").text($t - ); //广告时间减 1
$hh = setTimeout("time()", ); //递归，反复调用自己
}
else {
$(".banner").hide();
$(".btn").show(); //隐藏图片
$("#t").text();
clearTimeout($hh); //清除定时间
}
}
$(function () {
$(".btn").bind("click", function () {
$(this).hide();
$(".banner").show();
time();
});
$(".close").bind("click", function () {
$(".banner").hide();
$(".btn").show();
$("#t").html();
clearTimeout($hh);
});
});
</script>
</head>
<body>
<div class="banner">
<div class="ad"><a><img src="img/ad.jpg" /></a></div>
<div class="ad_time">广告还剩<span id="t"></span>秒</div>
<div class="close"></div>
</div>
<div class="btn">点击显示广告</div>
</body>
</html>
css:
body {
font-family:微软雅黑;
font-size:12px;
}
.banner{
width:564px;
height:361px;
margin:20px auto;
position:relative;/*让子元素做定位*/
display:none;
}
.ad_time{
width:110px;
height:25px;
background-color:#;
color:#fff;
position:absolute; /*让倒计时在图片上方显示*/
top:;
left:;
text-align:center;
line-height:25px;
}
.ad_time span{
font-weight:bold; color:#cc0; padding: 5px;
}
.close{
width:49px;
height:20px;
position:absolute;
top:;
right:;
background:url(../img/close.png) no-repeat; //给关闭添加背景图片
cursor:pointer;
}
.btn{
width:100px;
height:30px;
border:1px solid #ddd;
background-color:#eee;
text-align:center;
line-height:30px;
margin:20px auto;
cursor:pointer;
}
