教你一天玩转JavaScript(四)——使用JavaScript实现定时弹出广告定时隐藏广告
2017-04-27 23:29
761 查看
使用JavaScript实现定时弹出广告定时隐藏广告
现在有这样一个需求：在网站的首页上定时弹出一个广告，并且定时隐藏掉。若要实现这个需求，则必须理解BOM(浏览器对象模型)中的Window对象的定时的操作：设置定时的方法
清除定时的方法
除此之外，还要知道CSS中的一个显示和隐藏的属性——display，其值有
block：显示元素
none：隐藏元素
下面我就按如下步骤来使用JavaScript实现定时弹出广告和定时隐藏的效果：
创建一个【使用JS定时弹出广告.html】页面
确定页面的加载事件——onload事件
触发一个函数，编写该函数
在函数中设置定时操作，定时执行一个页面加载5秒之后显示广告的函数
清空定时，重新设置定时，5秒钟后隐藏广告
我提供的【使用JS定时弹出广告.html】页面的内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
#bodyDiv{
border:1px solid blue;
width:90%;
}
.logoDiv{
border:1px solid blue;
width:33%;
float:left;
height:50px;
}
.clear{
clear:both;
}
#menuDiv{
width:100%;
height:50px;
border:1px solid blue;
background-color: black;
}
#imgDiv{
width:100%;
border:1px solid blue;
}
#menuDiv a{
font-size: 20px;
color: white;
}
.productClass{
width:100%;
border:1px solid blue;
}
.contentClass{
width:100%;
border:1px solid blue;
}
.contentClass font{
font-size: 30px;
color: black;
}
</style>
</head>
<body>
<!-- 整体的DIV -->
<div id="bodyDiv">
<!-- logo的DIV -->
<div>
<div class="logoDiv">
<img src="../img/logo2.png" height="48">
</div>
<div class="logoDiv">
<img src="../img/header.png" height="48">
</div>
<div class="logoDiv">
<a href="">登录</a>
<a href="">注册</a>
<a href="">购物车</a>
</div>
<div class="clear"></div>
</div>
<!-- Menu的DIV -->
<div id="menuDiv">
<a href="">首页</a>
<a href="">电脑办公</a>
<a href="">手机数码</a>
<a href="">烟酒糖茶</a>
</div>
<!-- 图片滚动的DIV -->
<div id="imgDiv">
<img id="img1" src="../img/1.jpg" width="100%">
</div>
<!-- 热门商品的DIV -->
<div class="productClass">
<!-- 文字部分的DIV -->
<div class="contentClass">
<font>热门商品</font><img src="../img/title2.jpg">
</div>
<!-- 商品部分的DIV -->
<div style="width:100%;border:1px solid blue;">
<div style="width:15%;height: 460px;border:1px solid blue;float:left;">
<img src="../img/big01.jpg" width="100%" height="100%">
</div>
<div style="width:84%;height: 460px;border:1px solid blue;float:left;">
<div>
<div style="border:1px solid blue;width:48%;float:left;height:228px;">
<img src="../img/middle01.jpg" width="100%" height="100%">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
</div>
<div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
</div>
</div>
</div>
</div>
<!-- 广告的DIV -->
<div style="width:100%;border:1px solid blue;">
<img src="../img/ad.jpg" width="100%" height="80">
</div>
<!-- 最新商品的DIV -->
<div class="productClass">
<!-- 文字部分的DIV -->
<div class="contentClass">
<font>最新商品</font><img src="../img/title2.jpg">
</div>
<!-- 商品部分的DIV -->
<div style="width:100%;border:1px solid blue;">
<div style="width:15%;height: 460px;border:1px solid blue;float:left;">
<img src="../img/big01.jpg" width="100%" height="100%">
</div>
<div style="width:84%;height: 460px;border:1px solid blue;float:left;">
<div>
<div style="border:1px solid blue;width:48%;float:left;height:228px;">
<img src="../img/middle01.jpg" width="100%" height="100%">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
</div>
<div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
</div>
</div>
</div>
</div>
<!-- 页脚的DIV -->
<div style="width:100%;border:1px solid blue;">
<img src="../img/footer.jpg" width="100%">
</div>
<!-- 友情链接及版权的DIV -->
<div style="width:100%;border:1px solid blue;">
<center>
关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明 <br/>
Copyright © 2005-2016 传智商城 版权所有
</center>
</div>
</div>
</body>
</html>在代表logo的div上面加上如下一个div：
<div id="adDiv" style="width: 100%; display: none;"> <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" /> </div>
一开始就让其隐藏掉。接着就要编写JavaScript代码实现定时弹出广告定时隐藏广告，直接贴出代码：
<script>
var time;
window.onload = function() {
time = window.setInterval("show()", 5000);
}
// 显示广告的方法
function show() {
// 获得广告的div元素
var adDiv = document.getElementById("adDiv");
adDiv.style.display = "block";
window.clearInterval(time); // 清空掉之前设置的定时
time = window.setInterval("hide()", 5000); // 重新再设置一个定时
}
// 隐藏广告的方法
function hide() {
// 获得广告的div元素
var adDiv = document.getElementById("adDiv");
adDiv.style.display = "none";
window.clearInterval(time); // 清空掉之前设置的定时
}
</script>在Firefox浏览器上运行该页面，即可达到该效果，在此并不演示，读者可自行测试。
上文讲解了使用JavaScript完成图片轮播的效果，这里也可以将这两个效果一并实现之。那么核心的JavaScript代码就为：
<script>
var time;
window.onload = function() {
time = window.setInterval("show()", 5000);
// 设置定时
window.setInterval("changeImg()", 5000);
}
// 图片轮播效果的方法
var i = 1;
function changeImg(){
// alert("aaaa");
i++;
// 获得图片的控制权
if(i > 3){
i=1;
}
var img1 = document.getElementById("img1");
img1.src="../img/" + i + ".jpg";
}
// 显示广告的方法
function show() {
// 获得广告的div元素
var adDiv = document.getElementById("adDiv");
adDiv.style.display = "block";
window.clearInterval(time); // 清空掉之前设置的定时
time = window.setInterval("hide()", 5000); // 重新再设置一个定时
}
// 隐藏广告的方法
function hide() {
// 获得广告的div元素
var adDiv = document.getElementById("adDiv");
adDiv.style.display = "none";
window.clearInterval(time); // 清空掉之前设置的定时
}
</script>读者如需完整代码，可参考教你一天玩转JavaScript(四)——使用JavaScript实现定时弹出广告定时隐藏广告！
总结
JavaScript中的BOM对象
JavaScript中的BOM对象有：
下面我稍微提一下这些对象。
Window
Window对象表示浏览器中打开的窗口。我们只须注意一下其属性和方法即可。Window对象的属性：
可见BOM对象中的其他对象，例如history、location、Navigator和Screen就是Window对象的属性。
Window对象的方法：
较常用的方法我也用红框框起来了。
Navigator
Navigator对象包含有关浏览器的信息。我们只须注意一下其属性即可。Navigator对象的属性：
Screen
Screen对象包含有关客户端显示屏幕的信息。我们只须注意一下其属性即可。Screen对象的属性：
History
History对象包含用户（在浏览器窗口中）访问过的URL。我们只须注意一下其方法即可。History对象的方法：
使用比较多的就是go()方法了，
history.back();等价于
history.go(-1);。
Location
Location对象包含有关当前URL的信息。我们只须注意一下其属性即可。Location对象的属性：
使用比较多的是href属性，常用它进行跳转页面。例如，有如下一个按钮：
<input type="button" value="跳转" onclick="jump()" />
点击它要跳转到一个页面中去，可编写如下的JavaScript代码：
<script>
function jump() {
location.href = "xxx.html";
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用jQuery实现页面定时弹出广告效果
- 一天搞定jQuery(一)——使用jQuery完成定时弹出广告
- 【javascript】使用window.open()实现弹出广告框
- JavaScript学习——使用JS完成页面定时弹出广告
- 关于类似于电信弹出广告（push业务），使用ROS与简单web服务器实现
- 使用javascript实现信息的显示和隐藏
- JavaScript使用setTimeout实现延迟弹出警告框的方法
- 使用jse的TimerTask实现在一天中的某个区间段定时任务
- 使用JAVASCRIPT实现弹出框，过一段时间自动消失
- javascript中使用定时函数实现移动的方块
- javascript使用定时函数实现跳转到某个页面
- jquery 实现定时显示与隐藏div广告代码
- 使用JAVASCRIPT实现弹出框，过一段时间自动消失
- 使用jquery实现点击按钮弹出层和点击空白处隐藏层
- javascript使用定时函数实现跳转到某个页面
- 类似于电信弹出广告（push业务），使用ROS与简单web服务器实现
- 使用javascript实现某网站的头部广告向上切换效果
- 使用JAVASCRIPT实现弹出框，过一段时间自动消失
- JavaScript实现动态广告弹出框
- query 实现定时显示与隐藏div广告代码