一、页面定时弹出广告(setInterval定时器和xxx.style.display属性)
1.1 技术分析
- 定时器
setInterval:每隔多少毫秒执行一次函数
setTimeout：多少毫秒之后执行一次函数(只执行一次)
clearInterval：清除
clearTimeout：清除
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//window对象是一个最顶层对象(setInterval之前的window.可以取消)
function test()
{
console.log("setInterval 调用了"); //输出 "setInterval 调用了"
}
var timeID;//用于存设置变量
function start()
{
timeID=setInterval("test()",2000); //隔2秒打开一次test()方法
}
function end()
{
clearInterval(timeID); //清除
}
</script>
</head>
<body>
<input type="button" value="开启定时器" onclick="start()"><br /> //定义两个触发事件按钮
<input type="button" value="关闭定时器" onclick="end()"><br />
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//文档加载顺序:从上到下
function hideImg(){
var img=document.getElementById("img1");//1.先获取当按钮对象
img.style.display="none"; //2.display属性---无(×)
}
function showImg(){
var img=document.getElementById("img1");//1.先获取当按钮对象
img.style.display="block"; //2.display属性---有(√)
}
</script>
</head>
<body>
<input type="button" value="显示" onclick="showImg()">
<input type="button" value="隐藏" onclick="hideImg()"><br>
<img src="../img/1.jpg" id="img1" >
</body>
</html>
|
1.2 步骤分析
1. 确定事件：页面加载完成时间 onload触发
2. 时间要触发函数 init()
3. init函数里面做一件事情：
3.1 启动定时器(setTimeout)
3.2 显示一个广告
3.2.1 在开启一个定时器五秒钟后取消广告
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//三秒后显示广告
function show(){
var img=document.getElementById("div1");
img.style.display="block"; //display改为√
setTimeout("hide()",5000);// 放过一个定时器 选择一次性的setTimeout(函数，时间间隔)
}
//五秒后关闭广告
function hide(){
var img=document.getElementById("div1");
img.style.display="none"; //display改为×
}
//按钮触发的事件
function init(){
setTimeout("show()",3000);// 放过一个定时器 选择一次性的setTimeout(函数，时间间隔)
}
</script>
</head>
<body onload="init()">
<img id="div1" src="../products/hao/small02.jpg" width="100%" style="display: none;" >
</body>
</html>
|
