前端简单入门第九讲 使用JavaScript实现定时弹出广告定时隐藏广告

7 篇文章 1 订阅
25 篇文章 2 订阅

使用JavaScript实现定时弹出广告定时隐藏广告

现在有这样一个需求:在网站的首页上定时弹出一个广告,并且定时隐藏掉。若要实现这个需求,则必须理解BOM(浏览器对象模型)中的Window对象的定时的操作:

  • 设置定时的方法
    这里写图片描述
  • 清除定时的方法
    这里写图片描述

除此之外,还要知道CSS中的一个显示和隐藏的属性——display,其值有

  • block:显示元素
  • none:隐藏元素

下面我就按如下步骤来使用JavaScript实现定时弹出广告和定时隐藏的效果:

  1. 创建一个【使用JS定时弹出广告.html】页面;
  2. 确定页面的加载事件——onload事件;
  3. 触发一个函数,编写该函数;
  4. 在函数中设置定时操作,定时执行一个页面加载5秒之后显示广告的函数;
  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>&nbsp;&nbsp;
				<a href="">电脑办公</a>&nbsp;&nbsp;
				<a href="">手机数码</a>&nbsp;&nbsp;
				<a href="">烟酒糖茶</a>&nbsp;&nbsp;
			</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中的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>
  • 0
    点赞
  • 0
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页

打赏

李阿昀

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值