使用javascript实现定时弹出广告图片(onload页面加载事件和定时函数setinterval())
技术分析
- 事件(onload)这是一个页面加载函数,点击该页面就就会加载该函数。(该事件只能写一次,并且写在body标签中)
- setInterval()函数
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数
定时函数setInterval()语法：setInterval(code,millisec[,“lang”])，code 必需。要调用的函数或要执行的代码串。 millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。举例setinterval(“changeImg()”,1000);
**定时函数setInterval()返回值:**一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
书写定时弹出广告图片代码
代码步骤分析:
- 在页面的指定位置隐藏一张图片(style中的display属性值是none)。
- 确定事件为onload并为其绑定一个函数。
- 书写页面加载函数(写出图片定时显示定时任务函数)。
- 写出定时任务函数中的函数,并把图片的style中display属性设置为block。
- 清除显示图片的是任务
- 书写隐藏图片的定时操作(注意:把隐藏图片的定时任务写在第4步骤的方法中,不能下载页面加载方法中,不然的话隐藏图片的定时任务不执行)
- 写出定时任务函数中的函数,并把图片的style中display属性设置为none。
- 清除隐藏图片的定时操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#page{
/*border:1px solid red;*/
width:1320px;
height:1244px;
margin:auto;
}
#titleBar{
/*border:1px solid blue;*/
width:1320px;
height:45px;
}
.titleBar_one{
/*border:1px solid black;*/
width:438px;
height:45px;
/*所有标题框向左浮动*/
float:left;
}
#titleBar_one_col{
padding-top:10px;
}
ul li{
/*列表标签改为内联(行专列)*/
display:inline;
}
#menu{
/*border:1px solid green;*/
width:1320px;
height:45px;
background:black;
}
.ul_li{
color:white;
}
#lunbo{
/*border:1px solid red;*/
width:1320px;
height:500px;
}
#new_product{
/*border:1px solid black;*/
width:1320px;
height:450px;
}
#new_product_top{
/*border:1px solid blue;*/
width:1320px;
height:33px;
padding-top:12px;
}
#new_product_buttom{
/*border:1px solid red;*/
width:1320px;
height:400px;
}
#new_product_buttom_left{
/*border:1px solid black;*/
width:240px;
height:400px;
float:left;
}
#new_product_buttom_right{
/*border:1px solid green;*/
width:535px;
height:200px;
float:left;
}
.new_product_buttom_right_item{
/*border:1px solid blue;*/
width:177px;
height:200px;
float:left;
}
#gaungao{
/*border:1px solid green;*/
width:1320px;
height:130px;
}
a{
/*去除超链接的下划线*/
text-decoration:none;
}
</style>
<script>
//定时弹出广告图片图代码实现
//2.确定事件为onload并为其绑定一个函数。
function init(){
//3.写出页面加载函数(写出图片定时显示定时任务函数)。
//这里就不能加var了,加了就是局部变量下面清除的时候用不了
intervalblack = setInterval("tempImgblack()",5000);
//清除定时不能放在这里,可能还没执行完tempImgblack()方法就清除定时任务了。
//clearInterval(intervalblack);
//6.书写影藏图片的定时操作(错误示范)
//影藏图片的定时任务不能放在页面加载事件里面,因为他是页面加载的时候就执行了所有的init()中的代码,
//等setInterval("tempImgblack()",5000)代码执行完后init中的代码早就执行完了。
//intervalblack = setInterval("tempImgnone()",5000);
//8.清除影藏图片的定时操作
//clearInterval(intervalnone);
}
//4.写出定时任务函数中的函数,并把图片的style中display属性设置为block。
function tempImgblack(){
document.getElementById("tempImg").style.display="block"
//5.清除图片显示的定时操作
clearInterval(intervalblack);
//6.书写影藏图片的定时操作,放在这里就不会,不行执行这段代码了。
intervalblack = setInterval("tempImgnone()",5000);
}
//7.写出定时任务函数中的函数,并把图片的style中的display属性设置为onne。
function tempImgnone(){
document.getElementById("tempImg").style.display="none"
//8.清除影藏图片的定时操作
clearInterval(intervalblack);
}
</script>
</head>
<body οnlοad="init()">
<div id="page">
<img id="tempImg" style="display:none;" src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" height="200px"/>
<div id="titleBar">
<div class="titleBar_one">
<img id="titleBar_one_col" src="../img/logo2.png" width="300px" height="30px"/>
</div>
<div class="titleBar_one" align="center">
<img src="../img/header.png" width="400px" height="45px"/>
</div>
<div class="titleBar_one">
<ul>
<a href="#"><li>登录</li></a>
<a href="#"><li>购物车</li></a>
<a href="#"><li>注册</li></a>
</ul>
</div>
</div>
<div id="menu">
<ul>
<li style="font-size: 25px;" class="ul_li">首页</li>
<li class="ul_li">手机数码</li>
<li class="ul_li">家用电器</li>
<li class="ul_li">育婴保健</li>
<li class="ul_li">鞋靴箱包</li>
<li class="ul_li">奢侈品</li>
</ul>
</div>
<!--轮播-->
<div id="lunbo">
<img id="lunboimg"src="../img/1.jpg" width="100%" height="100%"/>
</div>
<!--最新商品-->
<div id="new_product">
<div id="new_product_top">
<font size="5">最新商品</font>
<img src="../img/title2.jpg" />
</div>
<div id="new_product_buttom">
<div id="new_product_buttom_left">
<img src="../img/big01.jpg" width="100%" height="100%"/>
</div>
<div id="new_product_buttom_right">
<img src="../img/middle01.jpg" width="100%" height="100%"/>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
</div>
</div>
<!--广告-->
<div id="gaungao">
<img src="../img/ad.jpg" width="100%" height="100%"/>
</div>
<!--友情链接和版权信息-->
<div id="linajie" align="center">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright @ 2019-2020 乱七八糟商城 归ginger所有
</p>
</div>
</div>
</body>
</html>
页面展示
