欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用JavaScript完成定时弹出广告

程序员文章站 2022-03-20 15:37:09
完成页面定时弹出广告 需求分析 ​一般网页,当我们刚打开的时候,它会5秒之后,显示一个广告,让我们看5秒钟,然后他的广告就自动消失了! 技术分析 定时器 setInterval : 每隔多少毫秒执行一次函数 setTimeout: 多少毫秒之后执行一次函数 clearInterval clearT ......

完成页面定时弹出广告

需求分析

​ 一般网页,当我们刚打开的时候,它会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的文件加载顺序问题

  • js的引入方式

引入一个外部js文件

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