首页 > 编程语言 > 详细

使用JavaScript完成定时弹出广告

时间:2020-05-06 01:52:38      阅读:78      评论:0      收藏:0      [点我收藏+]

完成页面定时弹出广告

需求分析

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

技术分析

  • 定时器
    setInterval : 每隔多少毫秒执行一次函数
    setTimeout: 多少毫秒之后执行一次函数
    clearInterval
    clearTimeout

显示广告 img.style.display = "block"
隐藏广告 img.style.display = "none"

步骤分析

  1. 确定事件: 页面加载完成的事件 onload
  2. 事件要触发函数: init()
  3. init函数里面做一件事:
    1. 启动一个定时器 : setTimeout()
    2. 显示一个广告
      1. 再去开启一个定时5秒钟之后,关闭广告

代码实现

<script>
		
			function init(){
				setTimeout("showAD()",3000);
			}
			
			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";
			}
		</script>

扩展

引入一个外部js文件

<script src="js文件的路径"  type="text/javascript"/>

使用JavaScript完成定时弹出广告

原文:https://www.cnblogs.com/zllk/p/12833760.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!