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!=0) { $("#t").text($t - 1); //广告时间减 1 $hh = setTimeout("time()", 1000); //递归，反复调用自己 } else { $(".banner").hide(); $(".btn").show(); //隐藏图片 $("#t").text(6); clearTimeout($hh); //清除定时间 } } $(function () { $(".btn").bind("click", function () { $(this).hide(); $(".banner").show(); time(); }); $(".close").bind("click", function () { $(".banner").hide(); $(".btn").show(); $("#t").html(6); 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">6</span>秒</div> <div class="close"></div> </div> <div class="btn">点击显示广告</div> </body> </html>
css:
body { font-family:微软雅黑; font-size:12px; } .banner{ 564px; height:361px; margin:20px auto; position:relative;/*让子元素做定位*/ display:none; } .ad_time{ 110px; height:25px; background-color:#000; color:#fff; position:absolute; /*让倒计时在图片上方显示*/ top:0; left:0; text-align:center; line-height:25px; } .ad_time span{ font-weight:bold; color:#cc0; padding:0 5px; } .close{ 49px; height:20px; position:absolute; top:0; right:0; background:url(../img/close.png) no-repeat; //给关闭添加背景图片 cursor:pointer; } .btn{ 100px; height:30px; border:1px solid #ddd; background-color:#eee; text-align:center; line-height:30px; margin:20px auto; cursor:pointer; }
