利用JavaScript完成页面定时弹出广告

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

Happy祥子

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

阅读量1.3k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/woaixuexihhh/article/details/84061378

版权

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

需求分析
一般网页，我们在打开的时候会弹出一个广告，让我们看5秒钟，然后自动消失。
技术分析

定时器
setInterval:每隔多少秒执行一次函数
setTimeout:多少秒之后执行一次函数
clearInterval
clearTimeout
显示广告 img.style.display = “block”
隐藏广告 img.style.display = “none”

步骤

确定时间：页面加载完成之后的事件：onload()
事件要触发的函数：init（）
init函数里面的逻辑
代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function showAD(){
				//获取要操作的img
				var img = document.getElementById("img1");
				img.style.display = "block";//显示广告
				// 开启一个定时器关闭广告
				setTimeout("hideAD()",3000);
			}
			function hideAD(){
				//获取要操作的img
				var img = document.getElementById("img1");
				img.style.display = "none";//隐藏广告
			}
			function init(){
				setTimeout("showAD()",3000);
			}
		</script>
	</head>
	<body onload="init()">
		<img src="../img/ad.jpg" width="100%" style="display: none; height: 250px;" id="img1"/>
	</body>
</html>

Happy祥子

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
利用JavaScript完成页面定时弹出广告

需求分析一般网页，我们在打开的时候会弹出一个广告，让我们看5秒钟，然后自动消失。技术分析定时器setInterval:每隔多少秒执行一次函数setTimeout:多少秒之后执行一次函数clearIntervalclearTimeout显示广告 img.style.display = “block”隐藏广告 img.style.display = “none”步骤...
复制链接

扫一扫

专栏目录