JavaScript实现定时广告

列：使用JavaScript实现定时广告

广告在页面打开3秒后显示，广告显示5秒之后自动关闭

技术

1. 获取图片的位置(document.getElementById(“”))
2. 隐藏图片：display：none
3. 定时操作：setInterval(“显示图片的函数”，3000);

步骤分析

• 第一步：在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)

• 第二步：确定事件(onload)并为其绑定一个函数

• 第三步：书写这个函数(设置一个显示图片的定时操作)

• 第四步： 书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)

• 第五步：清除显示图片的定时操作()

• 第六步：书写隐藏图片的定时操作

• 第七步：书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)

• 第八步：清除隐藏图片的定时操作()

代码

1.js文件

function init(){
	//1.设置显示广告图片的定时操作
	time = setInterval("showAd()",3000);
}

//2.书写显示广告图片的函数
function showAd(){
	//3.获取广告图片的位置
	var adEle = document.getElementById("img2");
	//4.修改广告图片元素里面的属性让其显示
	adEle.style.display = "block";
	//5.清除显示图片的定时操作
	clearInterval(time);
	//6.设置隐藏图片的定时操作
	time = setInterval("hiddenAd()",5000);
}
//7.书写隐藏广告图片的函数
function hiddenAd(){
	//8.获取广告图片并设置其style属性的display值为none
	document.getElementById("img2").style.display= "none";
	//9.清除隐藏广告图片的定时操作
		clearInterval(time);
}

html

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

来源：https://blog.csdn.net/Birdmotianlun/article/details/99072569