前端速成：双月Java之旅（week3）_day5

最新推荐文章于 2024-10-17 09:40:47 发布

若凡໌້ᮨ

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量193

点赞数

文章标签：前端 java servlet

本文链接：https://blog.csdn.net/weixin_53673193/article/details/125958280

版权

本文详细介绍了如何使用JavaScript实现网页广告的自动弹出和关闭功能。通过结合setInterval和setTimeout函数，可以在页面加载后3秒自动弹出广告，并在5秒后自动关闭。同时，还提供了手动显示和隐藏广告的示例代码，便于理解和实践。

摘要由CSDN通过智能技术生成

今天学习的是页面定时弹出广告并定时关闭。

需求分析：一般网页当我们打开时，它会在几秒钟之后弹出一个广告，然后又在几秒钟之后自动关闭广告。

技术分析：setInterval：设置每隔多少时间执行一次函数

setTimeout：设置多长时间后执行一次函数

clearInterval：清除时间间隔设置

clearTimeout:：清除时间剩余设置

然后就是广告的显示和隐藏，我们首先做的是设计一个通过点击按钮来实现显示和隐藏图片的代码，其内容如下。主体框架为两个按钮（一个显示按钮和一个隐藏按钮）以及一张图片。图片需要id属性便于函数获取对象。而在<script>中需要定义两个函数，函数整体比较简单只有两步，一是通过id获取图片，然后就是修改图片的属性img.style.display来控制图片的显示状态。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function showImg(){
				var img = document.getElementById("img1");
				img.style.display = "block";
			}
			function hideImg(){
				var img = document.getElementById("img1");
				img.style.display = "none";
			}
		</script>
	</head>
	<body>
		<input type="button" value="显示" onclick="showImg()"  align="center"/>
		<input type="button" value="隐藏" onclick="hideImg()"  align="center"/><br />
		<img src="../img/1.jpeg" height="200px" width="400px" align="center" id="img1"/>
	</body>
</html>

现在开始设计广告自动弹出和关闭。

首先是步骤分析：

1.确定事件：页面加载完成的事件onload

2.事件要触发函数：init()

3.init函数里面做一件事：

1.启动一个定时器：setTimeout()

2.显示一个广告，然后开启一个定时器5秒后关闭广告

如下是自动弹出广告（打开页面后3秒弹出）和关闭广告（弹出广告后5秒关闭）的代码。

HTML中首先需要将图片设置成隐藏，即img.style.display="none"，然后在<body>处设置onload，即加载页面成功后开始运行函数。这里需要定义三个函数分别是显示广告、隐藏广告和打开页面是自动运行的函数init()，init函数内部嵌套了定时器用来定时运行显示函数，然后在显示函数内部嵌套了隐藏函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function show(){
				var img = document.getElementById("img1");
				img.style.display = "block";
				setTimeout("hide()",5000);
			}
			function hide(){
				var img = document.getElementById("img1");
				img.style.display = "none";

			}
			function init(){
				setTimeout("show()",3000);

			}
		</script>
	</head>
	<body onload="init()">
		<img src="../img/1.jpeg" height="400px" width="100%" id="img1" style="display: none;"/>
	</body>
</html>