JavaScript（三）——定时弹出广告

最新推荐文章于 2023-09-08 19:30:10 发布

子木_Lee

最新推荐文章于 2023-09-08 19:30:10 发布

阅读量963

点赞数

分类专栏： JavaScript 文章标签：定时弹出广告 JavaScript

本文链接：https://blog.csdn.net/qq_41819988/article/details/90813416

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

完成页面定时弹出广告

1.1 需求分析

一般网页，当我们刚打开的时候，它会2秒之后，显示一个广告，让我们看3秒钟，然后他的广告就自动消失了！

1.2 技术分析

定时器

setInterval : 每隔多少毫秒执行一次函数

setTimeout: 多少毫秒之后执行一次函数

clearInterval

clearTimeout

显示广告 img.style.display = "block"

隐藏广告 img.style.display = "none"

1.3 步骤分析

确定事件: 页面加载完成的事件 onload

事件要触发函数: init()

init函数里面做一件事:

启动一个定时器 : setTimeout()

显示一个广告

再去开启一个定时5秒钟之后,关闭广告

1.4 代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定时弹出广告</title>
		<!--
			1. 确定事件: 页面加载完成的事件 onload
			2. 事件要触发函数:  init()
			3. init函数里面做一件事: 
			   1. 启动一个定时器 : setTimeout() 
			   2. 显示一个广告
			      1. 再去开启一个定时5秒钟之后,关闭广告
		-->
		<script>
			function hideImg(){
				var img = document.getElementById("img2");
				img.style.display="none";
			}
			function showImg(){
				var img = document.getElementById("img2");
				img.style.display="block";
				
				setTimeout("hideImg()",3000)
			}
			function init(){
				setTimeout("showImg()",2000 )
			}
		</script>
	</head>
	<body onload="init()">
			<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;" id="img2"/>
		
	</body>
</html>

1.5 效果展示

子木_Lee

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（三）——定时弹出广告

完成页面定时弹出广告1.1 需求分析一般网页，当我们刚打开的时候，它会2秒之后，显示一个广告，让我们看3秒钟，然后他的广告就自动消失了！1.2 技术分析定时器 setInterval : 每隔多少毫秒执行一次函数 setTimeout: 多少毫秒之后执行一次函数 clearInterval clearTimeout...
复制链接

扫一扫