定时弹广告案例
题目要求：
1.创建一个页面加载事件，让页面先加载出来，再执行函数
2.页面一打开5秒后显示广告，创建一个执行一次的定时器
3.然后5秒后再隐藏广告，创建一个执行一次的定时器
4.广告的显示和隐藏，需要使用css中的display属性
属性值：block：以行级标签显示 none：隐藏标签
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时弹广告案例</title>
<script type="text/javascript">
//1.创建一个页面加载事件,让页面先加载出来,在执行函数
window.onload = function(){
//2.页面一打开5秒后显示广告,创建一个执行一次的定时器
setTimeout(function(){
//4.广告的显示和隐藏,需要使用css中的display属性
//属性值: block:以行级标签显示
var adDivEle = document.getElementById("adDiv");
adDivEle.style.display = "block";
},5000);
//3.然后5秒后再隐藏广告,创建一个执行一次的定时器
setTimeout(function(){
//4.广告的显示和隐藏,需要使用css中的display属性
//属性值: block:以行级标签显示
var adDivEle = document.getElementById("adDiv");
adDivEle.style.display = "none";
},10000);
}
</script>
</head>
<body>
<div id="adDiv" style="width:1200px;margin: 0px auto; display: none;">
<img src="img/ad.jpg" />
</div>
<table width="1200px" align="center" cellpadding="0px" cellspacing="0px">
<!--第1行-->
<tr>
<td>
<!--百度图片-->
<img src="img/logo2.png"/>
</td>
<td>
<!--正品图片-->
<img src="img/header.jpg"/>
</td>
<td align="right">
<!--登录注册购物车超链接-->
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
<tr bgcolor="black" height="50px">
<!--把3列合并为1列-->
<td colspan="3">
<!--导航条:首页 手机数码 电脑办公 服装鞋帽-->
<a href="#">首页</a>
<a href="#">手机数码</a>
<a href="#">电脑办公</a>
<a href="#">服装鞋帽</a>
</td>
</tr>
</table>
<br />
<!--
2).轮播图图片,使用1*1表格
-->
<table width="1200px" align="center" cellpadding="0px" cellspacing="0px">
<tr>
<td>
<img src="img/1.jpg" width="1200px" />
</td>
</tr>
</table>
<!--
3).热门商品标题,里边嵌套一个图片
-->
<h1 align="center">热门商品<img src="img/title2.jpg"/></h1>
<!--
4).热门商品列表,使用2*7表格
第1行:
第1列:0元购大牌图片,占用2行,rowspan=2
第2列:投影神券图片,占用3列,colspan=3
第5列:商品(商品图片,商品标题,商品价格(红色)),居中显示
第6列:商品(商品图片,商品标题,商品价格(红色)),居中显示
第7列:商品(商品图片,商品标题,商品价格(红色)),居中显示
第2行:
第2列:商品(商品图片,商品标题,商品价格(红色)),居中显示
第3列:商品(商品图片,商品标题,商品价格(红色)),居中显示
第4列:商品(商品图片,商品标题,商品价格(红色)),居中显示
第5列:商品(商品图片,商品标题,商品价格(红色)),居中显示
第6列:商品(商品图片,商品标题,商品价格(红色)),居中显示
第7列:商品(商品图片,商品标题,商品价格(红色)),居中显示
-->
<table width="1200px" align="center" cellpadding="0px" cellspacing="0px">
<!--第1行-->
<tr>
<!--第1列:0元购大牌图片,占用2行,rowspan=2-->
<td rowspan="2">
<img src="img/big01.jpg"/>
</td>
<!--第2列:投影神券图片,占用3列,colspan=3-->
<td colspan="3">
<img src="img/middle01.jpg"/>
</td>
<!--第5列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
<!--第6列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
<!--第7列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
</tr>
<!--第2行-->
<tr>
<!--第2列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
<!--第3列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
<!--第4列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
<!--第5列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
<!--第6列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
<!--第7列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
</tr>
</table>
<!--
5).页面中部的广告图片,使用1*1表格
-->
<table width="1200px" align="center" cellpadding="0px" cellspacing="0px">
<tr>
<td>
<img src="img/ad.jpg"/>
</td>
</tr>
</table>
<!--
6).热门商品列表,使用2*7表格
-->
<table width="1200px" align="center" cellpadding="0px" cellspacing="0px">
<!--第1行-->
<tr>
<!--第1列:0元购大牌图片,占用2行,rowspan=2-->
<td rowspan="2">
<img src="img/big01.jpg"/>
</td>
<!--第2列:投影神券图片,占用3列,colspan=3-->
<td colspan="3">
<img src="img/middle01.jpg"/>
</td>
<!--第5列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
<!--第6列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
<!--第7列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
</tr>
<!--第2行-->
<tr>
<!--第2列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
<!--第3列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
<!--第4列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
<!--第5列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
<!--第6列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
<!--第7列:商品(商品图片,商品标题,商品价格(红色)),居中显示-->
<td align="center">
<img src="img/small03.jpg" /><br />
南瓜<br />
<font color="red">¥299.99</font>
</td>
</tr>
</table>
<!--
7).页面的底部,使用2*1表格
第1行:底部的广告图片
第2行:底部超链接
联系我们| 关于百度| 加入百度| 报名流程| 百度声明| 法律声明| 项目合作
-->
<table width="1200px" align="center" cellpadding="0px" cellspacing="0px">
<!--第1行:底部的广告图片-->
<tr>
<td>
<img src="img/footer.jpg" width="100%"/>
</td>
</tr>
<tr>
<td align="center">
<a href="#">联系我们|</a>
<a href="#">关于百度|</a>
<a href="#">加入百度|</a>
<a href="#">报名流程|</a>
<a href="#">百度声明|</a>
<a href="#">法律声明|</a>
<a href="#">项目合作</a>
</td>
</tr>
</table>
</body>
</html>
知识点：
1、等页面加载完毕，再发生事件。那就是执行响应函数 window.onload = function(){ }
2、弹广告，隐藏广告，利用的是定时器
3、广告的显示和隐藏，需要使用css中的display属性
4、隐藏广告的时候，时间就得10秒了