需求分析:
一般网页,当我们刚打开的时候,它会5秒之后,显示一个广告,让我们看5秒钟,然后他的广告就自动消失了!
技术分析:
a.定时器
setInterval : 每隔多少毫秒执行一次函数
setTimeout: 多少毫秒之后执行一次函数
clearInterval
clearTimeout
b.显示广告 img.style.display = "block"
c.隐藏广告 img.style.display = "none"
显示和隐藏.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01显示和隐藏</title>
<script>
function yincang(){
var im = document.getElementById("img1");
im.style.display = "none";
}
function show(){
var im = document.getElementById("img1");
im.style.display = "block";
}
</script>
</head>
<body>
<input type="button" value="显示" onclick="show()"/>
<input type="button" value="隐藏" onclick="yincang()"/><br />
<img src="../img/1.jpg" width="100%" id="img1"/>
</body>
</html>
注:文档加载顺序问题 这么写是错的.把<script/>标签移到<img/>标签后,才对.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02文档加载顺序</title>
<script>
//注:文档加载顺序 这么写是错的.把<script/>标签移到<img/>标签后,才对.
var im = document.getElementById("img1");
function yincang(){
// var im = document.getElementById("img1");
im.style.display = "none";
}
function show(){
// var im = document.getElementById("img1");
im.style.display = "block";
}
</script>
</head>
<body>
<input type="button" value="显示" onclick="show()"/>
<input type="button" value="隐藏" onclick="yincang()"/><br />
<img src="../img/1.jpg" width="100%" id="img1"/>
</body>
</html>
步骤分析:
1. 确定事件: 页面加载完成的事件 onload
2. 事件要触发函数: init()
3. init函数里面做一件事:
1. 启动一个定时器 : setTimeout()
2. 显示一个广告
1. 再去开启一个定时5秒钟之后,关闭广告
页面定时弹出广告.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03页面定时弹出广告</title>
<!--
步骤分析:
1. 确定事件: 页面加载完成的事件 onload
2. 事件要触发函数: init()
3. init函数里面做一件事:
1. 启动一个定时器 : setTimeout()
2. 显示一个广告
1. 再去开启一个定时5秒钟之后,关闭广告
-->
<script>
function init(){
setTimeout("showAD()",3000);
}
function showAD(){
//首先要获取要操作的img
var img = document.getElementById("img1");
//显示广告
img.style.display = "block";
//再开启定时器,关闭广告
setTimeout("hideAD()",3000);
}
function hideAD(){
//首先要获取要操作的img
var img = document.getElementById("img1");
//隐藏广告
img.style.display = "none";
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" width="100%" id="img1" style="display: none;"/>
</body>
</html>